DL Tag - Vertical align text in DT Tag, color background and have same height as DD Tag
Given the following html & CSS:
I am trying to center the text in the DT & DD tags and have the DT tag background color cover 100% of the longer DD tag. Create a .html file with the above code to see how it looks now. I did have this as a table but I am forced to use the DL markup now. Any help would be appreciated. Thanks!
Answer
setting a height for your dt elements will 'stretch' the background, and so long as this height is >= the height of the contained dd's, then it will look as you want.
dt{height:100px;}
providing text-align:center on the dl tag will center your text.
dl{text-align:center;}
The hard part is then trying to vertically align the text to the middle. An option for this is to contain the text in an absolute positioned div.. but is a bit messy.
<dt><div>Key 1</div></dt>
dt{position:relative;height:100px;}
dt div{position:absolute;bottom:50px;}
check here for other options/solutions Vertical Align text in a Label
hope this helps..