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.
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>
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>
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:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.