Text-align:center; not working? Here is the solution

Hello everyone,

Today I would like to show you guys how to use the text-align property what it's meant for. The reason I would like to show you this is , because there are quite some people out there that refuse to buy a decent book and learn css the proper way. Resulting in a question like the following:

I am trying to center a link but for some reason it won't center when using text-align center.

Now if we would just look at the w3c manual what does it say:

16.2 Alignment: the 'text-align' property

'text-align'

Value:	left | right | center | justify | inherit
Initial:	a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'
Applies to:	block containers
Inherited:	yes
Percentages:	N/A
Media:	visual
Computed value:	the initial value or as specified

This property describes how inline-level content of a block container is aligned.

So it only applies to block elements and it has effect to it's in-line content. And if we would have paid attention to proper a book, we would have known that an anchor ( <a> ) element is an in-line element, just as a <span> is. But a paragraph for instance is a block element just like a <div> is.

Now if you have no idea what I am talking about, I recommend to have a look at the manual on block elements. An easy way to find out if something is a block element or not is to see whether or not is starts at a new line or pushes other elements to a new line. As you may have read in my article on the monkey book and the Float property. Block elements start at a new line and by using float we can put them on the same line.

Now there is a way to give a inline element the behaviour of a block element. display:block; will do this.
Herunder you will find a code with 4 examples of an anchor tag that is aligned. Hope this is usefull for you guys,
Cheers!

Cssfreakie

P.s. if you have requests on articles, questions in general of anything let me know by leaving a comment.

<style type="text/css">
#container1{
width:300px;
border:1px solid red;
}
#container2{
width:300px;
border:1px solid blue;
}
#container3{
width:300px;
border:1px solid blue;
}
#container4{
width:300px;
border:1px solid pink;
}
.center{
text-align: center; /* used for block elements */
}
.block{
display:block;
}
.block2{
display: block;
text-align: center;
}
</style>
<div id="container1">
<a class="center" href="">this is a link</a>

</div>
<br />
<div id="container2">
<p class="center"><a href="">this is a link</a></p>

</div>
<br />
<div id="container3">
<p ><a class="block center" href="">this is a link</a></p>

</div>
<br />
<div id="container4">
<p><a class="block2"href="">this is a link</a></p>

</div>