CODEWITHSUNDEEP
htmlcss
user3871018
user3871018

Reputation:

text-align:center doesn't work

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).

Upvotes: 1

Views: 4262

Answers (2)

bencripps
bencripps

Reputation: 2053

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');

}

Upvotes: 0

Win
Win

Reputation: 62260

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;
}

Upvotes: 4

Related Questions