CSS垂直对齐在FIXED位置div内

Question

I have a header: FIXED position.

Here is css:

#header{
    position:fixed;
    height: 6em;
    display:block;
    width: 100%;        
    background: rgba(255, 255, 255, 1);
    z-index:9;
    text-align:center;
    color: #000000; 
}

And inside, I want to center text middle and vertical middle. Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.

HTML:

<div id="header">
   <div id="bandname">Bewolf Photography</div>
   <div id="insta"><img  src="imgs/insta.png" width="40" alt="tablets" /></div>
   <div id="bandname">Bewolf Photography</div>
</div>

CSS for text and image:

#bandname
{
   display: inline-block;
   font-size: 2.8em;
   padding: 0px 0px 0 0;
   vertical-align: middle;
   background: rgba(0, 255, 0, 1);
}

#insta { 
 display: inline-block;
 padding: 0px 0px 0px 50px;
 vertical-align: middle;
}

I just can't figure that one out...

I tried using

   line-height:  6em;  

Help would be appreciated.. .thanks but that doesn't work either.

Answer 1

Use the pseudo element vertical centre trick.

#header:before brings the inline elements down to the centre. The direct children of header are given display: inline-block and vertical-align: middle to keep a straight line.

Read more about pseudo elements here.

This technique basically adds a "div" before the rest of your content. (It can be replaced with a real <div> if you really need this to work in IE7 and below. [Don't bother!] ). It basically looks like this:

<div class="header">
  <!-- added by css -->
  <div>I am :before and you will all do as I say! To the middle, plebs!</div>
  <!-- end css content -->

  <div>Yes master!</div>
  <div>Anything you say sir!</div>
</div>

Working Example

Note: I removed the div from around the image. It seems unnecessary, but can be placed back in if needs must. Also, I have targeted only the direct children of #header using the direct children selector: > . Here is a huge list of CSS selectors.

 #header { position: fixed; height: 6em; display: block; width: 100%; background: rgb(0, 255, 255); /* Fall-back for browsers that don't support rgba */ background: rgba(0, 255, 255, 1); z-index: 9; text-align: center; color: #000000; top: 0px; } #header:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } #header > div, #header > img { display: inline-block; font-size: 2.8em; padding: 0px 0px 0 0; vertical-align: middle; } 

 <div id="header"> <div id="bandname">Test</div> <img src="http://www.placehold.it/50" width="40" alt="tablets" /> <div id="bandname">test</div> </div> 

Answer 2

The easiest solution is to have the following css for it's content.

#header .wrapper
{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Since there are multiple children, it's better to wrap them around a wrapper div. Here's the working example:

http://jsfiddle.net/zf987w0b/1/

Answer 3

You can use the properties left , right , top and bottom , set em to 50% for example, and them use the transform property to translate the element -50% of itself to perfectly center it. Sounds confuse but i made a fiddle: http://jsfiddle.net/zzztfkwu/ Will this work?

EDIT: http://jsfiddle.net/kbh97n82/1 updated fiddle with .wrapper solution.