css - CSS 将文本垂直居中/居中对齐

Question

我知道这听起来很简单，但它不适合我。我究竟做错了什么 ？

.popuphdr {
      background-color:#00477f;
      height:30px;
      width:100%;
      margin:0px;
      color: #ffffff;
      vertical-align:middle;
}


<div class="popuphdr">
        <div>WARNING - Read carefully before proceeding</div>   
</div>

Answer 1

vertical-align: middle不适用于 div 元素（不会产生您正在寻找的影响）

有关可能的解决方案，请参阅http://www.vanseodesign.com/css/vertical-centering/，您可以通过几种方法来完成您想要完成的工作。

--

取自该页面的 CSS 是简单的解决方案：

.popuphdr {
    display: table;
    /* Your other CSS HERE as well, minus vertial-align */
 }

.popuphdr div {
    display: table-cell;
    vertical-align: middle;
}

这是一个扩展的 jsfiddle，其中包含您的 js 并添加了 text-align center：

http://jsfiddle.net/BqgVM/1/

Answer 2

我是绝对居中的粉丝（也在鸦雀发布的链接中指出）。它工作得很好而且很简单。

更多细节在这里

HTML

    <div class="popuphdr">
        <div>WARNING - Read carefully before proceeding</div>   
</div>

CSS

.popuphdr {
    background-color:#00477f;
    height:30px;
    width:100%;
    color: #ffffff;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

还有一个在这里工作的小提琴

Answer 3

.popuphdr{
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    background-color:#00477f;
    height:30px;
    width:100%;
    margin:0px;
    color: #ffffff;
}

CSS Flexbox 很棒。这里有几个链接可以了解更多信息：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/