Span does not vertically align text in the middle

Question

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

Displays text, but text always aligns at the top. Any idea on how to center the text in the middle of the range?

Answer 1

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

Use the span line-height:207px to align vertically.

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

It will work out. 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>