CODEWITHSUNDEEP
htmlcssvertical-alignment
Matthias W.
Matthias W.

Reputation: 1077

Vertically align elements in header div (text and logo)

I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:

I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.

So I have taken this approach:

<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" /></a></div>
</div>

And for the CSS:

  #headline { overflow: hidden;
            height: 224px;
            text-align: left;
            padding: 0px 80px 0px 80px;
          }

  #headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
          font-size: 20pt;
          color: #000000;
          float: left;
          font-weight: bold;
        }
  #logo    { 
          float: right;
        }

So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.

Example

This is what I want it to look like (the blue rectangle is the logo):

enter image description here

I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?

Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/

Thank you for your help!

Upvotes: 0

Views: 3969

Answers (4)

Michelangelo
Michelangelo

Reputation: 5948

I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/

<div id="headline">
    <div id="wrapper">
        <div id="headertext">Some title some
            <br/>more title text</div>
        <div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" width="198px" height="120px" /></a>
        </div>
    </div>
</div>

CSS

 #wrapper {
      margin-top: 60px;
  }

Upvotes: 1

emerson.marini
emerson.marini

Reputation: 9348

You can achieve this using display: table and display: table-cell, together with vertical-align: middle.

I've removed some irrelevant bits from your original CSS to make it easier to see what's different.

To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.

<div id="headline">
    <div id="headertext">
        Some title<br/>some more title text
    </div>
    <div id="logo">
        <div id="fakeImg"></div>
    </div>
</div>

...

#headline {
    width: 100%;
    height: 224px;
    background: yellow;
    display: table;
}
#headertext {
    text-align: left;
}
#headertext,
#logo {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
#fakeImg {
    width: 100px;
    height: 100px;    
    background: blue;
    float: right;
}

Demo

Upvotes: 3

zgood
zgood

Reputation: 12571

I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:

display:table-cell;
vertical-align:middle;

I also made a version using flexbox here

I just added the following styles to your wrapping div:

display:flex;
align-items:center;
justify-content:space-between;

Upvotes: 1

Zach Leighton
Zach Leighton

Reputation: 1941

You can use some CSS to accomplish this. Also check for vendor-specific transforms.

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Here is a fiddle, and I added another div wrapper.

http://jsfiddle.net/5o3xmfxn/

Updated version of your fiddle:

http://jsfiddle.net/f5vpakdv/1/

Upvotes: 1

Related Questions