Question

全部，我有以下代码：

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

显示文本，但文本始终在顶部对齐。有关如何将文本置于跨度中间的任何想法吗？

Answer 1

在范围样式line-height:207px中使用以垂直对齐。

Answer 2

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

Answer 3

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

Answer 4

这样就可以了。我添加了一个边框，使其更加醒目。

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

跨度不垂直对齐中间的文本

4 个答案: