1

我正在使用一些带有类的 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 中回显的。我不知道这是否会影响它，但我想我应该提到它。

4

6 回答 6

7

您需要将其放入容器中并设置text-align: center;为容器或使其成为块元素，display: block;. a标签是内联元素，因此text-align不适用于它们。

这是一个作为块元素工作的示例：http: //jsfiddle.net/a9YAp/

在一个 div 中：http: //jsfiddle.net/pmsSV/

于 2013-06-01T10:25:41.757 回答
1

尝试这个

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

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
color:blue;
margin:0;
padding:0;
}
于 2013-06-01T12:20:25.790 回答
1

您的宽度将不起作用，因为您无法在a不更改其显示属性的情况下设置标签的宽度。这就是为什么text-align似乎不起作用

演示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;它会正常工作。

演示http://jsfiddle.net/kevinPHPkevin/CJdvQ/2/

于 2013-06-01T10:35:40.097 回答
0

演示在这里... 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%;
}
于 2013-06-01T10:34:38.600 回答
0

只需将您的<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;
    }
于 2013-06-01T10:36:25.433 回答
-1

您应该尝试给元素或高于宽度的元素

a.searchresult
{
font-family:Trebuchet MS;
font-size:20px;
text-align:center;
color:blue;
margin:0;
padding:0;
width:300px;
}
于 2013-06-01T10:26:42.623 回答