CSS在固定位置的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;  

希望能得到帮助...感谢 但那也不起作用。

- user3011784

---

你能发布一个 Fiddle 演示吗？ - Developer

不相干，但是 Id 必须唯一。 - Jon P

这是 JSFiddle 的链接：http://jsfiddle.net/mib92/kbh97n82/ - user3011784

Answer 1

使用伪元素垂直居中技巧。 #header:before 将内联元素下移至中心。将 header 的直接子元素赋予 display: inline-block 和 vertical-align: middle 以保持一条直线。 在此阅读有关伪元素的更多信息。 这种技术基本上是在内容的其余部分之前添加一个“div”。（如果您真的需要在 IE7 及以下版本中使用此功能，则可以将其替换为真正的 <div>。[不必烦恼！]）。它基本上看起来像这样：

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

示例演示

注意：我从图像周围删除了

。 这似乎是不必要的，但如果必须的话可以放回去。此外，我仅使用了直接子元素选择器>来定位#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>

- misterManSam

---

请问在您的情况下如何使“Test”和img左对齐，“test”右对齐？ - Beeing Jk

Answer 2

最简单的解决方案是为其内容设置以下CSS样式。

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

由于存在多个子元素，最好将它们包装在一个包装器div中。这是一个可行的示例:

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

- Manoj Shrestha

Answer 3

您可以使用属性left、right、top和bottom，例如将它们设置为50%，然后使用transform属性将元素向自身的-50%移动，以完美地居中它。听起来很混乱，但我已经做了一个示例：http://jsfiddle.net/zzztfkwu/。这样行得通吗？ 编辑：http://jsfiddle.net/kbh97n82/1更新了包含.wrapper解决方案的示例。

- Grudges

---

但是如果我有更多的元素......像这个 fiddle: http://jsfiddle.net/mib92/kbh97n82/ 那么它们会彼此覆盖吗？ - user3011784

你不能让超过一个物品完美居中，否则它们会重叠！你可以将想要居中的物品包裹在一个容器中，然后居中容器？像这样：http://jsfiddle.net/kbh97n82/1/ - Grudges