Question

我有网站http://11klassniki.ru，我尝试使用text-align：center将文本放在中间，但它不起作用。

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

高度：80px）

Answer 1

您需要display: block。

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

如果您不想将图像置于图像下方，则可以使用span标记。

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

Answer 2

我认为问题在于您将文本中心应用于标记，而不是容器。如果你将它添加到容器（konjurs_ege），它应该工作。在Chrome和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');

}

text-align：center不起作用

2 个答案: