CSS垂直对齐在FIXED位置div内

I have a header: FIXED position.

我有一个标题:固定位置。

Here is css:

这是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:

用于文本和图像的CSS:

#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.

帮助将不胜感激..谢谢,但这也不起作用。

3 个解决方案

#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.

#header:before将内联元素下移到中心。标题的直接子节点显示:inline-block和vertical-align:middle保持直线。

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”。 (如果你真的需要在IE7及以下版本中使用它,可以用真正的

替换。[不要打扰!])。它基本上看起来像这样:

<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.

注意:我从图像周围删除了div。这似乎是不必要的,但如果需要必须放回去。另外,我只使用直接子选择器来定位#header的直接子节点:>。这是一个巨大的CSS选择器列表。

#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>

#2

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?

您可以使用left,right,top和bottom属性,例如将em设置为50%,并使用transform属性将元素的-50%转换为完美居中。听起来很混乱,但我做了一个小提琴:http://jsfiddle.net/zzztfkwu/这会有用吗?

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

编辑:http://jsfiddle.net/kbh97n82/1更新了.wrapper解决方案。

#3

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

最简单的解决方案是为其内容提供以下css。

#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:

由于有多个子节点,最好将它们包装在包装器div周围。这是工作示例:

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