I have three elements I want to vertically center, all of which are contained in the html5 header element. One is a text element with a fixed width but a fluid height (in case i add content). Another is a div element containing a background image-separator with a fixed width and height. The last is a text element with a fixed with but fluid height.

I simply can't seem to get it to work. I'm tempted to cheat and make it "seem" aligned by giving the separator-div a negative top margin >_<

2 answers

This was chosen as the best answer

Okay, so I finally found a way to do it.

#outter  {  height:100%;  display:table;  vertical-align:middle;  }
#wrap  {  display: table-cell;  vertical-align: middle;  }

Thank you for your help Josiah.

Answered almost 8 years ago by Collin Banko

If you set the following on your <header> element, it should get you started in the right direction;

header {position: relative; top: 50%}

You might have to adjust the percentage a little bit to get the exact spacing you want. You could also add a margin to push it a little farther up or down.

Answered almost 8 years ago by Josiah Sprague
  • Unfortunately, that's not exactly what i am looking to do. I want my header element to remain in its current position but allow the text and image elements to flow freely in y-axis but all be vertically aligned in the center. Collin Banko almost 8 years ago