Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centering text with .aligncenter class
- This topic has 6 replies, 3 voices, and was last updated 10 years, 1 month ago by Peter.
-
AuthorPosts
-
February 24, 2014 at 1:15 pm #92175HawkeyeParticipant
Hi,
For the life of me I cannot remember how to center a block of text using this rule in the Wintersong theme's style sheet:
img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
}I can center images no problem, but I'm drawing a total blank about how to use .aligncenter with a paragraph or even a div. I've tried every permutation I can think of, and ultimately had to go with <p style="text-align:center">, which feels like a hack.
What am I missing?
Mark
February 26, 2014 at 12:09 am #92418Davinder Singh KainthMemberIf you are using text in a widget, then it can be done directly using:
<center>your text</center>
For CSS method:
classname { text-align:center !important; margin:0 auto !important; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesFebruary 26, 2014 at 12:31 am #92425PeterMember^ Should point out the <center> tag is deprecated, the second css way is better.
February 26, 2014 at 11:30 am #92488HawkeyeParticipantThanks for the replies. In looking at my original post I realize I may not have been clear. This CSS rule is already in style.css for the Wintersong theme, and clearly looks as if it's designed to center both images and text:
img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
}I have no trouble figuring out how to center an image with "img.centered", but when I try to center even a few words of text with ".aligncenter" my efforts fail. (I know I'm having severe brain lock about how this is done, and that the answer is going to be absurdly obvious.)
Here's what I'm trying to do:
<p>blah blah blah </p>
<p>blah blah blah </p>
<p>important stuff</p> <--- center using .aligncenter???
<p>blah blah blah </p>
<p>blah blah blah </p>What I can't remember (or figure out) is how to use the rule I already have to center that particular paragraph. When I try <p class="aligncenter">, which I think should work, it fails. Do I need to specifically add "p.aligncenter" as a selector? If so, what is .aligncenter doing there all by itself, and how would it be used in some other way?
Mark
February 26, 2014 at 12:38 pm #92503PeterMemberMark,
<p>
elements are block-level by default (i.e., they are 100% width).The .aligncenter class you've shown just turns the element into a block (which
<p>
already is) and then gives it margin: 0 auto; which centers the element... but remember the<p>
is 100% width by default, so how can you tell if its been centered? Set that<p>
to width: 70%; and then you will see.I see no problem simply pressing the "align center" button in the post editor. It outputs <p style=”text-align:center”> and that is the normal way to do it. It's not a hack. But if you want to style that
<p>
more than just text-align: center, then you should use a class, like such:p.aligncenter { text-align: center; /* ...other styles here */ }
and then
<p class="aligncenter">
. Though you can pick any class name, it doesn't have to be called p.aligncenter (especially if you don't it to inherit the properties from the other .aligncenter class)February 26, 2014 at 1:20 pm #92512HawkeyeParticipantThanks Peter -- excellent explanation.
I got about halfway there and tried fiddling with the 24px margin settings to see if that would change how the text was displaying, but I didn't think about <p> being a default block.
I've been using <p style=”text-align:center”> as a workaround but from now on I'll simply treat it as default. (One of my concerns, which you addressed in your previous reply, was that a lot of the old/accepted methods of centering any kind of element have been deprecated. I'm not fluent in HTML5 and CSS3 so I trusted the theme's stylesheet a bit more than I needed to.)
Mark
February 26, 2014 at 3:31 pm #92551PeterMemberNo problems Mark. The
style
attribute will never be deprecated (unless the universe explodes) so it will always work. Best practice generally states that you should separate HTML structure from CSS presentation (in other words, avoid using the style attribute in HTML tags as much as possible). But obviously there are exceptions like this whenstyle
is the appropriate (and standard) solution. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.