html - CSS将文本垂直对齐到div的中间

Question

强制div中的文本垂直对齐到中间的正确方法是什么？我发现了一些“技巧”，但我需要一些适用于单行和多行的东西。希望我错过了一些愚蠢的简单事情：

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>

Answer 1

更改display: inline-block;为display: table-cell;

Answer 2

如果您的多行元素出于响应原因需要换行，那么最好的选择是使用 Flexbox。由于 Firefox 2009 Flexbox 实现的脆弱性，它的处理方式必须与现代 Flexbox 实现稍有不同。

http://codepen.io/cimmanon/pen/mxuFa

<ul>
  <li>One lorem ipsum dolor sit amet</li><!--
  --><li>Two</li><!--
  --><li>Three</li><!--
  --><li>Four</li><!--
  --><li>Five</li>
</ul>

li {
  text-align: center;
  vertical-align: middle;
  /* fallback for non-Flexbox browsers */
  display: inline-block;
  /* Flexbox browsers */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}

Answer 3

我为你做了一个简单的例子，在父 div 上使用 display: table-cell 属性。

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML： <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

Answer 4

试试这个，它会工作的。

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

CSS类

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }

Answer 5

http://jsfiddle.net/DawFy/16/

.header {

display: block;    
text-align: center;
    width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;


}
li
 {
list-style-type:none;

 }

<div >
<li>
<div class="header">test1 </div>
<li>
    <div class="header">some text that will wrap</div>
<li>
    <div class="header">test3</div>

试试这个不知道它是否“正确”但有效

Answer 6

这些解决方案中的大多数对我都不起作用，因为要么手动指定高度（我不能这样做），要么像 inline-block 和 float 这样的东西会消除内部 div 继承父 div 高度的能力。我最终创建了一个包含两列的表格，每列都包含我的 div，然后我没有问题垂直居中文本。