Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Conrad Turuk
Conrad Turuk
5,144 Points

Veritically and Horizontally Center H1 and H2 elements with an IMG within a HEADER element?

I have read a ton of posts on stackoverflow about html and css coding; however I still can't seem to get the result I'm looking for. In my header I would like to have a small logo on the left of the header with an h1 and h2 elements centered vertically and horizontally in the header. I have managed to get the horizontal center to work.

I have tried "display: table-cell" and "vertical-align: middle" in the CSS but then my header width gets overwritten to ~50% of the page.

Any ideas would be greatly appreciated!

My html code is:

    <header class="main-head">
      <img src="img/alberta-coat.png" alt="AB Arms" class="ab-logo">
      <h2>Heading - Small</h2>
      <h1>Heading - Large</h1>
    </header>

My CSS code is:

.main-head { width: 100%; text-align: center; display: inline-block; }

.ab-logo { width: 12%; border-right: 2px solid grey; padding: 0 15px 0 15px; margin-right: 15px; vertical-align: middle; float: left; }

Conrad Turuk
Conrad Turuk
5,144 Points

Bump

2 Answers

Joseph Greco
Joseph Greco
13,405 Points

I dont know if this is the solution you're looking for, but have you tried giving your h1,h2 elements top margin to center them vertically relative to your img?

In my example I used a stock photo from google that was 137px vertically. my h1 is 37px vertically and my h2 is 28px.

137px - 37px = 100px 100px/2= 50px

137px -28px = 109px 109px/2 = ~55px;

I removed all margin from h1,h2 then added the value above as top margins. I also added a couple float rules.

.main-head { 
width: 100%;
 text-align: center; 
display: inline-block; 
}

.ab-logo { 
    width: 12%; 
border-right: 2px solid grey; 
padding: 0 15px 0 15px; 
margin-right: 15px; 
float: left;  
}

h1,h2{
  margin: 0;
}

h1{
float: right;
margin-top: 50px;
}

h2{
 float: left;
  margin-top: 55px;
}

There might be a better way to do this, and I'd like to see another way if anyone knows.

Also, bootstraps grid system makes horizontal positioning really easy.

Joseph Greco
Joseph Greco
13,405 Points
Joseph Greco
Joseph Greco
13,405 Points

Another solution would be to set your h1,h2 elements line-height equal to its containing divs height.

.main-head height = 137px

h1,h2{
margin: 0;
line-height: 137px;
}