Not sure of the difference between text-align, align, inline, and block, which one will work for my situation?

Question

I was told to put a working code up that's why I have so much code up here but the part I am trying to focus on is aligning the top "resumania" logo in the center. When I put align: center; or text-align: center; it won't align. The class I am using for that is "logo." What am I doing wrong ??

<!DOCTYPE html>
<html>
<body>

<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!--NEED HELP RIGHT HERE-->

<a href=/Users/mtaslagyan/Desktop/resumania/homepage.html><img class="logo" src="/Users/mtaslagyan/Desktop/resumania/images/resumanialogo.PNG" alt="resumania logo pic"></a>

</head>

<div class="box">
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
        <img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
        </div>
        <div class="col-md-8">
        <h1 class="heading" align="center">Welcome to Resumania!</h1>
        </div>
    </div>
    </div>
</div>


<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>

</body>

<style>
a {
    color: #2d2d2d;
}

.logo{
    width:200px;
    border-radius:10px;
    text-align: center;


}

.box{
    width:100%;
    background-color:#f6f6f6;
}

.heading{
    color:navy;
    padding: 80px 100px 0px 0px;
    font-family: 'Ultra', serif;
}


</style>

</html>

**Side-note**: Don't put the `.logo` inside the ``, put it inside the `` instead — Carl Binalla, Mar 12 '18 at 06:07
even though the logo is in the "heading"? So what is the usually used for? and thank you i'll fix it! — Bob, Mar 12 '18 at 06:09
[Definition of ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) — Carl Binalla, Mar 12 '18 at 06:12

Rajath Kumar PM · Answer 1 · 2018-03-12T06:12:01.467

0

try this.if you give the class logo for the a tag i mean the parent of your logo image that will be much better otherwise the a tag will be full width.

.logo {
    width: 200px;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
}

edited Mar 12 '18 at 06:12

answered Mar 12 '18 at 06:06

Rajath Kumar PM

655
3
9

Thanks! This aligns it with the center but I also want to add margin space on the top and bottom but when I add "margin" it goes back to the front. Is there a way to add that? – Bob Mar 12 '18 at 06:14
@Bob add your margin like this. margin: 20px auto; – Rajath Kumar PM Mar 12 '18 at 06:17

score 0 · Answer 2 · answered Mar 12 '18 at 06:07

0

You can give the css property display:flex; align-items:center to your parent class (ie) for class "box"

answered Mar 12 '18 at 06:07

Saravana priyan S

429
3
9

score 0 · Accepted Answer · answered Mar 12 '18 at 06:17

One way is to wrap the <a> with a block element, like a <div> then you can use text-align:center

a {
  color: #2d2d2d;
}

.wrapper {
  text-align: center;
}

.logo {
  width: 200px;
  border-radius: 10px;
}

.box {
  width: 100%;
  background-color: #f6f6f6;
}

.heading {
  color: navy;
  padding: 80px 100px 0px 0px;
  font-family: 'Ultra', serif;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="wrapper">
  <a href=/Users/mtaslagyan/Desktop/resumania/homepage.html><img class="logo" src="http://via.placeholder.com/200x100" alt="resumania logo pic"></a>
</div>

<div class="box">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
      </div>
      <div class="col-md-8">
        <h1 class="heading" align="center">Welcome to Resumania!</h1>
      </div>
    </div>
  </div>
</div>

score -1 · Answer 4 · answered Mar 12 '18 at 06:22

-1

You may refer to this jsfiddle.

enter code here

answered Mar 12 '18 at 06:22

Mohd Shafiq

27
8

Not sure of the difference between text-align, align, inline, and block, which one will work for my situation?

4 Answers4