CSS Sassafrassy
- Started
- Last post
- 3 Responses
- crillix
Was curious if you guys had any css magic to vertically align text in a fixed height / width block element, the kicker is it could be 1 or 2 lines of text.
Sample....
<style>
.thing {
display:block;
width:150px;
height:60px;
background-color:#eee;
border:1px solid #000;
}
</style>
<div class="thing"><span>ME</span></div>
<div class="thing"><span>You guys are super awesome</span></div>Ok be awesome, go! Any help would be appreciated. I just can't seem to get this and a table will not do.
- Nicelydrawn0
Try this:
<html>
<head>
<style type="text/css">
.thing {
display:block;
width:150px;
height:60px;
background-color:#eee;
border:1px solid #000;
display: table;
}
div.thing span {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="thing">
<span>ME</span>
</div>
<div class="thing">
<span>You guys are super awesome</span>
</div>
</body>
</html>- Forgot to remove the 'display:block' from '.thing' Want to stick with 'display: table'Nicelydrawn
- crillix0
I like where you are going with that but it does not work in IE8 and of course we have to support IE >=(
You are still awesome for throwing out an idea!
- Nicelydrawn0
Here's my source. Looks old, but has an IE fix. Might work in IE 8. Boo IE!
- Brilliant, thank you for the link. I will give this a shot.crillix