Struggling with HTML or How To Use Vertical And Horizontal Alignment In CSS

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:

This is a test
About these ads

3 Responses to “Struggling with HTML or How To Use Vertical And Horizontal Alignment In CSS”


  1. 1 Bernd January 28, 2010 at 11:31 pm

    display: table mit display: table-cell und vertical-align:middle sollte es auch tun und es bleibt css – ergo es ist auslagerbar, leichter wartbar, etc…

  2. 2 Daniel February 11, 2010 at 10:38 am

    Thanks for the hint, for those of you who don’t speak German:

    You can use the ‘display’ style attribute to mimic tables, which is a little bit more elegant solution. More information can be found here:

    http://www.quirksmode.org/css/display.html#table

  3. 3 startpagina December 16, 2010 at 7:13 am

    great post man, i think your writing is really great, and i’d love to read more! hope you keep up the posting and keep up the good work, because this post has some really good quality!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





Follow

Get every new post delivered to your Inbox.