Mostly about Mazdaspeed, lifestyle improvement, and some web development tricks.

Any HTML developer that hates tables already hated the idea that you cannot vertical-align middle on any div. Therefore, many resort back to using table layouts.

Today, I found away to do without any tables. Here is how.

CSS:

#frame {
margin:30px auto;
display:block;
width:400px;
height:400px;
background-color:#666;
text-align:center;
color:#fff;
}
#frame span { max-width:398px; }
#frame span, #frame b { vertical-align:middle; display:inline-block  }
#frame b { height:100%; width:1px; overflow:hidden; }

HTML:

<div id=”frame”>
<b></b><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices egestas turpis, eget ultricies velit bibendum eget. Quisque lacinia enim nec nisi placerat mollis. Praesent quis elit sapien, ac ullamcorper est. Integer condimentum scelerisque lacus, ac ullamcorper ipsum hendrerit at. </span><b></b>
</div>

Amazingly works on all browsers including Internet Explorer 6. Modern browsers also works due to display:inline-block. If you are going to copy my code technique. Please credit me for finding this technique. Thank you.