CSS垂直对齐在FIXED位置div内

Question

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

这是css:

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

在里面,我想把文本中间和垂直中间.这是我到目前为止所做的,但它不起作用.所有示例在线显示绝对位置作为容器,但它不适用于固定的容器.

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:

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

我只是想不出那个...

我试过用

   line-height:  6em;  

帮助将不胜感激..谢谢,但这也无济于事.

Answer 1

使用伪元素垂直中心技巧.

#header:before将内联元素下放到中心.标题的直接子项给出display: inline-block并vertical-align: middle保持直线.

在这里阅读有关伪元素的更多信

这项技术基本上会在您的其他内容之前添加"div".(<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>

工作实例

注意:我从图像周围删除了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>

Answer 2

最简单的解决方案是使用以下CSS作为其内容。

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

由于有多个子级，因此最好将它们包装在wrapper div周围。这是工作示例：

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

Answer 3

例如，您可以使用属性left、right和top，将 em 设置为 50%，并且它们使用元素自身的 -50% 的变换属性来使其完美居中。听起来很混乱，但我做了一个小提琴：http://jsfiddle.net/zzztfkwu/这会起作用吗？bottomtranslate

编辑： http: //jsfiddle.net/kbh97n82/1使用 .wrapper 解决方案更新了小提琴。