css单行或多行垂直alignment
我有一个可以有一个或多个行的标题。
我如何垂直alignment文本？ 如果它总是一行，我可以将行高设置为容器高度。
我可以用JavaScript来做，但是我不太喜欢它，我正在寻找一种纯CSS的方式。
此外，如果容器可以扩大与线条，这将是完美的，所以我总是可以在顶部和底部有相同的填充。
为此，您可以使用display:table-cell属性：
.inline { display: inline-block; margin: 1em; } .wrap { display: table; height: 100px; width: 160px; padding: 10px; border: thin solid darkgray; } .wrap p { display: table-cell; vertical-align: middle; }
<div class="inline"> <div class="wrap"> <p>Example of single line.</p> </div> </div> <div class="inline"> <div class="wrap"> <p>To look best, text should really be centered inside.</p> </div> </div>
如果你不喜欢display:table技巧（我知道我不），没有它的解决scheme：
.cen { min-height:5em; width:12em; background:red; margin:1em 0; } .cen p { display:inline-block; vertical-align:middle; margin:0 0 0 1em; width:10em; } .cen::after { display:inline-block; vertical-align:middle; line-height:5em; width:0; content:"\00A0"; overflow:hidden; }
与HTML
<div class="cen"> <p>Text in div 1</p> </div>
这给了5em的高度，除非内容更高，然后它增长。
现场示例
编辑：哦，这应该工作的浏览器？ IE8将不会合作。
（稍后编辑：更新CSS来处理Chrome中的问题）
我非常喜欢这个解决scheme：
<div> <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span> <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span> </div>
随意使用样式表，100％的高度…
也可能不得不注释span标签之间的空格，因为这些是内联块
信贷去冥王星 。 我从这里得到它
<div style="outline:thin solid red;"> <span style="display: inline-block; vertical-align: middle; height: 60px;"></span> <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span> </div> <div style="outline:thin solid red;"> <span style="display: inline-block; vertical-align: middle; height: 60px;"></span> <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span> </div>
像这样的东西
HTML
<div> <p> Lorem Ipsum is simply </p> </div>
CSS
div { display: table; } p { display:table-cell; vertical-align: middle; }
样式明智，表格将是布局您的内容的最佳方式（把样式标签放在CSS中）：
<table style="border:1;collapse;width:300px;padding:5px;background-color:red;"> <tr> <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td> <td style="width:50px;vertical-align:top;color:white;">1 Line</td> </tr>
行数将需要一个JS脚本，看看这里：
http://www.webdeveloper.com/forum/archive/index.php/t-44333.html
如果你希望自己的文本能够响应，那么从一行到多行的宽度就会随着宽度的变化而dynamic地变化，上面提到的inline-block帮助器（这里有最好的兼容性）是不够的，因为.inlinehelper可以推动包装文本在自己的下面。
这里是完成这样一个simpel任务的解决scheme：
HTML：
<div id="responsive_wrap"> <span class="inlinehelper"><span id="content"> </div>
CSS：
#responsive_wrap { display: block; height: 100%; //dimensions just for width: 100%; //example's sake white-space: nowrap; } #content { display: inline-block; white-space: initial; } .inlinehelper { height: 100%; width: 0; vertical-align: middle; display: inline-block; }
注意 white-space:nowrap属性，它防止.inlinehelper和#content相互关联。 white-space:initial #content white-space:initial重置为span自身换行的能力;
另一种select：更多是个人喜好的问题。 您可以使用伪元素而不是.inlinehelper 。 删除.inlinehelper css规则和元素，并添加这个伪元素的CSSselect器：
#responsive_wrap:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 0px; }
PS：我发现这个问题太晚了，所以让我们来回答这个问题，也许这对某个人来说是有帮助的。
我喜欢这种解决scheme。 我在stackoverflow中看到了这个技巧，但不记得在哪里。 非常有用！ 🙂
ul { background: #000; padding-left: 0; } ul li { height: 130px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 3px solid #F7F7F7; } ul li:last-of-type { border-bottom: none; } ul li:after { color: #333; position: absolute; right: 35px; font-size: 40px; content: ">"; top: 50%; margin-top: -24px; color: #FFDA00; -webkit-transition: 0.25s all ease; transition: 0.25s all ease; } ul li a { font-size: 35px; font-family: Arial; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 40px; height: 100%; line-height: 38px; display: inline-block; width: 100%; text-align: left; text-decoration: none; } ul li a:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } ul li a span { display: inline-block; vertical-align: middle; }
<ul> <li class="dn"> <a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a> </li> <li> <a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a> </li> </ul>
