How do I centre a heading (with text and image) to my div?

Question

I am very,very new to coding and I am trying to center a heading in a div. I managed to center somehow, but it's not perfectly symmetrical and don't get why. Can anyone help me? Here is my code:

#up {
  width: 1200px;
  height: 100px;
  float: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  align-items: center;
  justify-content: center
}

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

Here is how it looks, h1 not symmetrically vertical centred

You have fixed height to div. you can give padding top to h1 and make it vertically proper center. — suyesh, May 30 '17 at 10:35
Possible duplicate of [Center href and image within div](https://stackoverflow.com/questions/25035498/center-href-and-image-within-div-and-remove-image-border) — Rob, May 30 '17 at 10:48

Paolo Forgia · Answer 1 · 2017-05-30T10:36:22.083

1

Adding line-height: 100px to #up solve your problem.

#up {
  width: 1200px;
  height: 100px;
  line-height: 100px;
  float: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  align-items: center;
  justify-content: center
}

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

edited May 30 '17 at 10:36

answered May 30 '17 at 10:30

Paolo Forgia

6,572
8
46
58

Suuuper, it worked! But I put 95px instead of 100px, to look how I wanted. Thank you, Paolo! :D – Lo Ri May 30 '17 at 15:39

score 0 · Answer 2 · edited May 30 '17 at 10:34

0

add the following attribute in your css.

#up{ text-align:center }

This will make everything appear in the middle inside that div.

edited May 30 '17 at 10:34

Paolo Forgia

6,572
8
46
58

answered May 30 '17 at 10:30

ashish

3,555
1
20
26

Thank you or your answer, ashish! I tried it, but still doesn't look like I wanted. – Lo Ri May 30 '17 at 15:48

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

As you are using align-items, justify-content properties so just add display as flex and width to 100% if needed.

align-items - vertically aligns the flexible container's items when the items do not use all available space on the cross-axis.

justify-content - horizontally aligns the flexible container's items when the items do not use all available space on the main-axis.

Following properties works when display of selected element is flex.

#up {
  width: 100%;
  /*You could even change width to 1200px and it still align the  child element at center of screen*/
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: powderblue;
  display:flex;
  align-items: center;
  justify-content: center;
}

<div id="up">
  <h1 class="arial" align="center" style="color:white"> NOT ANOTHER <img src="logo t shirt.png" style="vertical-align: middle; width:90px; height:90px" ;>T-SHIRT STORE </h1>
</div>

Super, frnt! :) This works too! Thanks also for the detailed explaining! — Lo Ri, May 30 '17 at 15:44

How do I centre a heading (with text and image) to my div?

3 Answers3