HTML wasn’t invented to write interactive, application-like web pages, it just offers a convenient way to create really simple documents containing links. Maybe that’s why programming web pages nowadays feels a little bit like writing a GUI in LaTeX. But maybe I am just complaining because I am not used to it … I am a software developer, not a web designer.
Hopefully HTML5 will make everything a little bit simpler. Anyway … I just want to create a simple box containing text centred in the middle of it. This box will be used as a button on a website. So what I need is to specify vertical and horizontal alignments. The horizontal alignment attribute is called “text-align” which I guess is a relict from the good old days when people where used to browse hypertext documents. But to put the text in the centre of the box I had to shoot myself into the foot … twice!
First I needed to create a table with one row and one entry and then I was able to
use misuse the table alignment options to centre the text vertically with an attribute called “vertical-align”. Why is there no “horizontal-align”? I don’t know. Why do I have to use a table? I don’t know. Don’t ask questions when writing CSS/HTML code. Never!
Here is the result:
<html><head></head><body> <div style="background-color:grey;width:10%;height:10%;position:absolute;top:10%;left:40%"> <table style="width:100%;height:100%"> <tr><td style="vertical-align:middle;text-align:center"> This is a test </td></tr> </table> </div> </body></html>
Hooray! Please don’t ask me how long I needed to figure this out :/
I wonder if there is a more elegant solution …
The style of the div element can be used to define the box, Mozilla’s Gecko engine supports some really cool CSS features like round edges, shadows and gradients (in the case of Firefox 3.6). But of course it won’t work with other browsers, it would be to easy if just everyone could write CSS/HTML code without studying computer science first. However, if you have Firefox just look and be amazed of my mighty text box: