Menu
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?
605
To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .
First, the <span> tag sets the height of <div> tag using the line-height property. The <span> also becomes an inline-block with the use of the vertical-align: middle. With <span> now an inline-block, it can be set at middle by using vertical-align: middle which works great for inline-block elements.
This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element. To align it, we will have to use something other than text-align , or turn it into an inline element.
Using the Line-Height Property In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element's height.
Use in the span style line-height:207px to align vertically.
190
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
