CODEWITHSUNDEEP
htmlcss
imulsion
imulsion

Reputation: 9040

text-align:center has no effect

I am using some CSS with classes to style different types of text. I am styling some links with a class called a.searchresult. One of the attributes is text-align:center, but it is having no effect on the text - it stays aligned to the left. Why is this happening?

Here is the relevant CSS:

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

And the 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>

Bear in mind that the link is being echoed from PHP. I don't know if that would affect it, but I thought I should mention it.

Upvotes: 1

Views: 2760

Answers (6)

alon1234
alon1234

Reputation: 117

try this

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

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

Upvotes: 1

nick
nick

Reputation: 3711

You need to put it in a container and set text-align: center; to the container OR make it a block element, display: block;. a tags are inline elements so text-align won't work on them.

Here's an example of it working as a block element: http://jsfiddle.net/a9YAp/

And here in a div: http://jsfiddle.net/pmsSV/

Upvotes: 7

Hamid Talebi
Hamid Talebi

Reputation: 1318

Just put your <a> tag into a div!then 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;
    }

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

Your width will have no effect as you can not set the width of an a tag without changing it's display properities. this is why text-align does not appear to be working

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;

}

add display:block; and it will work fine.

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

Upvotes: 1

yeyene
yeyene

Reputation: 7380

DEMO here... http://jsfiddle.net/94Ty9/

add this css...

CSS

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

Upvotes: 0

Tim
Tim

Reputation: 307

You should try giving the element or the element above a width

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

Upvotes: -1

Related Questions