HypedText Markup Language

Do you see that box centred in the below post? The HTML code that generates it was copied from the site where you do the blog value test. If you inspect the code, you see a <div> declaration like this:

<div style=”border: 1px solid #cccccc; background-color: white; width: 115px; text-align: center; padding: 0 0 10px 0;”>

You would expect this to put the div centred, like it appears below, right? WRONG! The content of the div appeared centred relating to the div, but the div itself appeared aligned to the left, in the post area. It took quite a while trying to figure out not only while was that so, but specially why would things like <center> and align: center yield no change whatsoever (and why when looked again at the source HTML of the post, it was not as I had left it).

Eventually I found the answer here: it appears that for some obscure reason, the rub lies with the attribute margin. On Firefox (and I assume, on other browsers as well), to attain horizontally centred divs, its left and right margins should be set to auto. A quick search for the infamously deceptive attribute “text-align” yields this description: “The text-align property aligns the text in an element.” It only affects the text and image inside the div!

And think people used to look at me flabbergasted and ask why indeed did (do!) I so much dislike HTML…

Os comentários estão fechados.