Html 跨度不垂直对齐中间的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9198260/
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
span not vertically aligning text in the middle
提问by user1048676
All, I have the following code:
所有，我有以下代码：
<span style="width:450px; height:207px; display:inline-block; vertical-align:middle; padding:0 0 0 10px; text-align:left;">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish
</span>
This displays the text but the text is always aligned at the top. Any idea on how to center the text in the middle of the span?
这将显示文本，但文本始终在顶部对齐。关于如何将文本居中放置在跨度中间的任何想法？
回答by Vinicius Ottoni
Use in the span style line-height:207pxto align vertically.
在 span 样式中使用line-height:207px以垂直对齐。
回答by Diodeus - James MacFarlane
Use a DIV and display:table-cell
使用 DIV 和 display:table-cell
<div style="width:450px; height:207px; display:table-cell; vertical-align:middle; padding:0 0 0 10px; text-align:left;border:1px solid #ff0000">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish
</div>
回答by Churk
<style>
span {
width: 450px;
height: 207px;
display: table-cell;
padding-left: 10px;
text-align: left;
vertical-align: middle;
}
</style>
<span>
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish
</span>
回答by Chuck
This will get it. I added a border to make it more visible.
这将得到它。我添加了一个边框以使其更明显。
<span style="width:450px; height:207px; display:table-cell; vertical-align:middle; padding:0 0 0 10px; text-align:left; border: solid 1px #000; ">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish
</span>
