CSS

Question

我正在使用一些带有类的CSS来设置不同类型的文本。我正在使用名为a.searchresult的类设置一些链接。其中一个属性是text-align:center，但它对文本没有影响 - 它保持与左对齐。为什么会这样？

以下是相关的CSS：

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
text-align:center;
color:blue;
margin:0;
padding:0;
}

HTML：

<div class = "content">
<h2 class = "main">Search results for post deletion in topics</h2>
<br /><br />
<!--This link is aligned left-->
<a class = 'searchresult' href = 'display_post.php?id=15'>Post deletion</a><p class = 'searchresult'>At last, I did it!</p><br /><br />
</div>

请记住，链接是从PHP回应的。我不知道这是否会影响它，但我想我应该提一下。

Answer 1

您需要将其放在容器中并将text-align: center;设置为容器或将其设为块元素display: block;。 a标记是内嵌元素，因此text-align不会对它们起作用。

以下是作为块元素工作的示例：http://jsfiddle.net/a9YAp/

这里有一个div：http://jsfiddle.net/pmsSV/

Answer 2

您的宽度无效，因为您无法在不更改其显示特性的情况下设置a标记的宽度。这就是text-align似乎无法正常工作的原因

DEMO http://jsfiddle.net/kevinPHPkevin/CJdvQ/1/

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
text-align:center;
color:blue;
margin:0;
padding:0;
width:500px;
border: thin solid black;

}

添加display:block;，它会正常工作。

DEMO http://jsfiddle.net/kevinPHPkevin/CJdvQ/2/

Answer 3

试试这个

.content{
width:500px;
text-align:center;
}

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
color:blue;
margin:0;
padding:0;
}

Answer 4

DEMO在这里...... http://jsfiddle.net/94Ty9/

添加此css ...

CSS

a.searchresult
{
    font-family:Trebuchet MS;
    font-size:20px;
    text-align:center;
    color:blue;
    padding:0;
    margin:0;
    float:left;
    width:100%;
}

Answer 5

只需将<a>标记放入div！然后text-align:center

<div class = "content">
    <h2 class = "main">Search results for post deletion in topics</h2>
    <br /><br />
    <!--This link is aligned left-->
    <div id="Holder">
    <a class = 'searchresult' href = 'display_post.php?id=15'>Post deletion</a><p class = 'searchresult'>At last, I did it!</p><br /><br />
    </div>
    </div>






 a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
text-align:center;
color:blue;
margin:0;
padding:0;
}
#Holder
{
    text-align:center;
    }

Answer 6

您应该尝试将元素或元素赋予宽度

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
text-align:center;
color:blue;
margin:0;
padding:0;
width:300px;
}

text-align：center无效

6 个答案:

CSS