Css 单线或多线垂直对齐

我有一个标题，可以有一个或多个行。

如何使文本垂直对齐？如果它总是一行，我可以只设置行的高度为容器的高度。

我可以使用 JavaScript 来完成，但是我并不喜欢它，我正在寻找一种纯 CSS 的方式。

另外，如果容器可以扩展与线，它将是完美的，所以我总是可以有相同的填充在顶部和底部。

enter image description here

91665 次浏览
小开

就像这样

超文本标示语言

<div>
<p>
Lorem Ipsum is simply
</p>
</div>

CSS

div {
display: table;
}
p {
display:table-cell;
vertical-align: middle;
}
小开
最佳答案

为此，可以使用 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>

但是它可以工作在 IE8及以上版本。阅读本文获得更多信息: < em > CSS 技巧: 垂直居中的多行文本 。

小开

在样式方面，表格是布局内容的最佳方式(将样式标签放在 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

小开

如果你不喜欢 display:table的把戏(我知道我不喜欢) ，这里有一个没有它的解决方案:

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

这使得 div 的高度为5em，除非内容更高，否则它会增长。
实例 给你。

编辑: 哦，这个应该在哪些浏览器上工作? IE8不会配合。

(稍后编辑: 更新 CSS 以处理 Chrome 中的问题)

小开

我真的很喜欢这个解决方案:

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

注意: 这似乎不适用于多行内容。

小开

如果你希望你的文本是响应性的，当宽度动态变化时，从一行到多行的包装文字是不够的，上面提到的使用 inline-block助手(这里有最好的兼容性)的技巧是不够的，因为 .inlinehelper可以把包装文字压到自己下面。
下面是这个简单任务的完整解决方案:

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相互换行。 #content上的 white-space:initial重置能力为 span本身包装;

另一个选择: 更像是个人喜好的问题。可以使用伪元素而不是 .inlinehelper。删除 .inlinehelper css 规则和元素并添加这个伪元素 css 选择器:

#responsive_wrap:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}

附注: 我发现这个问题实在太老了，所以就让这个答案吧，也许对某些人会有帮助。

小开

我喜欢这种解决办法。我在堆栈溢出的某个地方看到了这个技巧，但是不记得具体在哪里了。非常有用！:)

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>

小开

与使用 vertical-align: center和 display: table-cell不同，您可能想看看更新的称为 CSS 显示伸缩的方法，它要简单得多

.box {
width: 200px;
height: 50px;
padding: 10px;
margin-bottom: 20px;
background-color: red;
    

/* Only add these 2 lines */
display: flex;
align-items: center;
}
<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>


提交答案