Html css单行或多行垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9192389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css single or multiple line vertical align
提问by braindamage
I have a title that can have one or more lines.
我有一个可以有一行或多行的标题。
How can I align the text vertically? If it was always one line I could just set the line-height to the container height.
如何垂直对齐文本？如果它总是一行，我可以将 line-height 设置为容器高度。
I can do it using JavaScript, but I don't really like it, I'm searching for a pure CSS way.
我可以使用 JavaScript 来完成，但我并不喜欢它，我正在寻找一种纯 CSS 方式。
Also if the container could expand with the lines it would be perfect, so I can always have the same padding on the top and bottom.
此外，如果容器可以随着线条扩展，那将是完美的，所以我总是可以在顶部和底部使用相同的填充。
回答by sandeep
For this you can use display:table-cellproperty:
为此，您可以使用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>But it works IE8 & above. Read this article for more info: CSS Tricks: Vertically Center Multi-Lined Text.
但它适用于 IE8 及以上。阅读这篇文章了解更多信息：CSS 技巧：垂直居中多行文本。
回答by Mr Lister
If you don't like the display:tabletrick (I know I don't) here's a solution without it:
如果你不喜欢这个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:"<div class="cen">
<p>Text in div 1</p>
</div>
A0"; overflow:hidden;
}
with HTML
使用 HTML
<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>
This gives the div a height of 5em, unless the content is heigher, then it grows.
Live example here.
这使 div 的高度为 5em，除非内容更高，否则它会增长。
现场示例在这里。
Edit: Oh, which browsers is this supposed to work on? IE8 won't cooperate.
编辑：哦，这应该在哪些浏览器上工作？IE8 不会合作。
(Later edit: updated CSS to handle issues in Chrome)
（后期编辑：更新 CSS 以处理 Chrome 中的问题）
回答by Rolf
I really like this solution:
我真的很喜欢这个解决方案：
<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>Feel free to use stylesheets, and 100% for the height...
随意使用样式表，高度 100%...
Also might have to comment out spaces between the span tags, since these are inline-blocks
也可能需要注释掉 span 标签之间的空格，因为这些是内联块
Credit goes to Hades. I got it from Here
<div id="responsive_wrap">
<span class="inlinehelper"><span id="content">
</div>
Note:This appears not to work with multiple line content.
注意：这似乎不适用于多行内容。
回答by Max Yari
If You want your text to be responsive, wrapping words from one to multiple lines as width is dynamically changing, mentioned above trick with inline-blockhelper (which have the best compability here) can be not sufficient, as .inlinehelpercan push wrapping text down under itself.
Here's complete solution for such a simpel task:
如果您希望您的文本具有响应性，随着宽度的动态变化，将单词从一行换行到多行，上面提到的带有inline-block助手的技巧（此处具有最佳兼容性）可能是不够的，因为.inlinehelper可以将换行文本向下推到自身下方。
这是针对此类简单任务的完整解决方案：
HTML:
HTML：
#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;
}
CSS:
CSS：
#responsive_wrap:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
Noticethe white-space:nowrapproperty, which prevents .inlinehelperand #contentto wrap in relation to each other.
white-space:initialon #contentresets ability to wrap for spanitself;
请注意white-space:nowrap防止.inlinehelper和#content包装彼此相关的属性。
white-space:initial在#content复位能力包的span本身;
Another Option:More a matter of personal preference. You can use a pseudo element instead of .inlinehelper. Remove the .inlinehelpercss rules and element and add this pseudo-element css selector:
另一种选择：更多是个人喜好问题。您可以使用伪元素代替.inlinehelper. 删除.inlinehelpercss 规则和元素并添加这个伪元素 css 选择器：
<div>
<p>
Lorem Ipsum is simply
</p>
</div>
P.S.: I figured out that this is really old question too late, therefore let this answer be, maybe it will be helpfull for someone.
PS：我发现这真的是个老问题为时已晚，因此让这个答案成为可能，也许对某人有帮助。
回答by Aram Mkrtchyan
somthing like this
像这样的东西
HTML
HTML
div {
display: table;
}
p {
display:table-cell;
vertical-align: middle;
}
CSS
CSS
.box {
width: 200px;
height: 50px;
padding: 10px;
margin-bottom: 20px;
background-color: red;
/* Only add these 2 lines */
display: flex;
align-items: center;
}回答by Hans Tiono
Instead of using vertical-align: centerand display: table-cell, you might want to take a look at the newer method called CSS display flexwhich is MUCH simpler
除了使用vertical-align: centerand display: table-cell，您可能还想看一看名为CSS display flex的新方法，它更简单
<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div><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>
回答by Ryan Brodie
Styling wise, a table would be the best way to layout your content (put the style tags in CSS):
在样式方面，表格将是布局内容的最佳方式（将样式标签放在 CSS 中）：
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;
}Line count will require a JS script, have a look here:
行数需要一个 JS 脚本，请看这里：
http://www.webdeveloper.com/forum/archive/index.php/t-44333.html
http://www.webdeveloper.com/forum/archive/index.php/t-44333.html
回答by Алексей Воробьёв
I like that kind of solution. I saw somewhere this trick in stackoverflow but do not remember where exactly. Very usefel! :)
我喜欢这种解决方案。我在 stackoverflow 的某个地方看到了这个技巧，但不记得具体在哪里。很有用！:)
<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>