Question

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

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

    #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

这些解决方案中的大多数都不适用于我，因为高度是手动指定的（我不能做）或者内联块和浮点数这样的东西会移除内部div继承父div的能力高度。我最终创建了一个包含两列的表，每列包含我的div，然后我没有垂直居中文本的问题。

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

6 个答案: