text-align:center doesn't work

Question

I have website http://11klassniki.ru and I try to put text in in the middle using text-align:center but it doesn't work.

#konkurs_ege  {
position:absolute; 
top:10px;
left:380px;
width:140px;
height:80px;
background-image:url('http://11klassniki.ru/banners/konkurs_ege.jpg');
}
#konkurs_ege a {
text-decoration: none;
text-shadow: -1px -1px 0 #000000;
text-transform: uppercase;
font: 16px Arial, sans-serif;
font-weight:700;
width:100%;
text-align:center;
vertical-align: middle; 
}

Here is code



<div id="konkurs_ege">
<a  href='http://11klassniki.ru/view_post.php?id=144'>Konkurs!<br>how I made<br>IT</a>
</div>


I would like to have text: "Konkurs! how I made IT" in the middle of box (width:140px;

height:80px).

Answer 1

You need to have display: block .

.secondArticle a {
   display: block;
   text-align: center;
}

If you do not want to center the paragraph below the image, you can use span tag.

.secondArticle a span {
   display: block;
   text-align: center;
}

Answer 2

I believe the issue is that you're applying the text-center to the a tag, instead of the container. If you add it to the container ( konjurs_ege ), it should work. Worked for me on Chrome and FF.

#konkurs_ege {

position: absolute;

top: 10px;

left: 380px;

width: 140px;

height: 80px;

text-align: center;

background-image: url('http://11klassniki.ru/banners/konkurs_ege.jpg');

}