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

Question

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?

Answer 1

在span line-height:207px style line-height:207px以垂直对齐。

Answer 2

Use a DIV and 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

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>