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 并添加了文本对齐中心:

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