Just a CSS question…

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
By Oliver (AKA the Admin) on 14 comments
in Categories: Just Talking

It’s been a long time I didn’t bother you guys with my new blog theme, isn’t it ? :D

I just noticed that the “continue reading” link, in the blog’s home page, is left-aligned.
And yet, by CSS, it’s got a text-align: center; and within the post, it is saved inside a <p style=”text-align: center:”>…
Seriously, it’s driving me mad, would someone understand WHY ?!? :-?

Subscribe
Notify of
guest

14 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
Ptitkuro
Ptitkuro
8 years ago

Also you can try :

a.more-link
{
text-align : center;
}

Shiro
Shiro
8 years ago

Thinking in usability, you should put this link in the right side of article.

一二三
一二三
8 years ago

Bonjour Oliver,

Since you appear to be centering everything else under .entry anyway (despite reduced readability), the easiest way for you to fix this is to add:

.entry, .entry p { text-align: center; }

(Feel free to merge it with the existing entry for .entry, .entry p. Also, you can remove the text-align: center for a.more-link, since it has display: inline-block which makes it useless.)

jbk
jbk
8 years ago

For what I can see you are using this code:

Continue Reading

Just add the following:
<p style="text-align:center">
Continue Reading

This works because with this you are aligning text and not a link. I hope this help you, by the way I think I just fix the align problem with the rating system and the solution is in your e-mail

jbk
jbk
8 years ago

// <p style="text-align:center">
// Continue Reading
//

anonymous
anonymous
8 years ago

Looking at the source code of the pages I see that the continue reading link is in a plain p tag with no style, I tried playing with firebug and by writing it as p align="center" it gets centered. So I guess you should aplied the css style to the p tag or just align it like I did.
By the way, I'm new to firebug but it's a really cool firefox plugin, it lets you edit tags on the go, and you can see the effects directly on screen, it's a really handy tool.

TndX
TndX
8 years ago

The parent tag where the button is placed don't have any style assigned; just modify that so the final result is <p style="text-align:center">

Zera
Zera
8 years ago

Please do not center the continue reading button. I like it where it is.

Mederic64
Mederic64
8 years ago

Bonjour Oliver, won't bother with an answer cause a lot of guys answered it all already (I use div for aligning), but just wanted to let you know that I use RSS, and I never saw that button! :D That said, I still like the website style a lot.

Shaile
Shaile
8 years ago

一二三 suggestion works to align the button to the center.

Another option could be to have the button stretch the entire width of the entry by changing the "display" property to "display:block" rather than "inline-block" in this css "article.type-post a.more-link" in the custom.css file.

article.type-post a.more-link {
display:block
}

G45T0N
G45T0N
8 years ago

In fact, your doesnt have a text-align:center property, you just need to add it, Your <a> has it however since it reacts like a span it doesnt take all the space and so the tag is unaligned.

G45T0N
G45T0N
8 years ago

In fact, your "P" tag doesnt have a text-align:center property, you just need to add it, Your <a> has it however since it reacts like a span it doesnt take all the space and so the tag is unaligned.

Sorry for the double post it detected the P as a real html tag ….

Teo
Teo
8 years ago

It seams to me that "text-align:center" refers to the text INSIDE of the button, while you should move all the button…

Ryukisai
Ryukisai
8 years ago

Yes text align :center is in the button so…
add this and it will be center :
.more-link{
display: block; /* make it as a block*/
margin: 0 auto; /* force to center*/
width: 200px; /* u have to set the width*/
}