How To Center Text

Greetings!

I am hoping someone can help me figure out how to center text (both plain text and a custom button I made!) I tried this:

.single-thumb { text-align: center; }

And that didn’t work, any other suggestion of what I can do to center these texts? Thank you!

Here are some images of what it looks like:
http://starconversations.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-8.26.37-PM.png
http://starconversations.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-24-at-8.24.08-PM.png

Hello @jfujishin,

  1. It looks like you have already resolved your buttons alignment issue.

  2. Please try to use the following CSS code in order to center that text.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

#text-21 {
    text-align: center;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

That works great, thanks!

And for the buttons, I just used lots of spaces in the text box to center them… should I use code instead so it looks good on tablets and phones as well? Is there a code so that anytime I enter raw text like this it centers (because I will be adding buttons like this on all the pages under “My Star” (so the pages titled “part 1” through “part 4”)

Hello @jfujishin,

Please try to use this CSS code instead of previous in order to improve your buttons mobile appearance as well:

#text-21,
#text-27 {
    text-align: center;
}

.maxbutton-2,
.maxbutton-3 {
    margin: 10px;
}

I don’t know how exactly you will add other buttons and/or text widgets, and what classes/IDs they will have. Also I’m not sure if you want all your text widgets to be center-aligned, so I can’t provide universal code that will affect your future buttons and won’t affect elements that shouldn’t be affected.

Kind Regards, Roman.

That code worked!

I added the other buttons to the other “part 1” “Part 2” etc. pages (under the MY STAR page) and tried to copy the code with the specific numbers from each button, but it isnt centering the buttons on the other pages like this page… any ideas?

http://starconversations.com/wp-content/uploads/2017/07/Screen-Shot-2017-07-28-at-12.55.24-PM.png

Hello @jfujishin, please try this:

#text-21,
#text-27,
#text-34,
#text-36,
#text-39,
#text-41 {
    text-align: center;
}

.maxbutton-2,
.maxbutton-3,
.maxbutton-4,
.maxbutton-5,
.maxbutton-6,
.maxbutton-7,
.maxbutton-8,
.maxbutton-9,
.maxbutton-10,
.maxbutton-11 {
    margin: 10px;
}

Kind Regards, Roman.

Perfect! Thank you!

You are welcome @jfujishin! :slight_smile:

Kind Regards, Roman.

I was trying to coyp the same format you gave me for my website, but still having trouble. See in the attachment the field of text I am trying to center http://starconversations.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-15-at-3.17.41-PM.png
(the part that says “don’t wait! Learn to connect…”) and tried to write a custom code:

#text-53, {
    text-align: center;
}

.maxbutton-13 {
    margin: 10px;
}

but it didn’t center the text like it did on the other text fields. I found the text box number by looking at my website source. What am I doing wrong?

Or is there a way to tell the website to ALWAYS center specific Maxbuttons (like always center .maxbutton-13 no matter where it appears on the website?

Hello @jfujishin,

  1. You have needless comma after #text-53. That’s why that code doesn’t work.

  2. You can try to use .maxbutton class instead of IDs in order to center all buttons.

Kind Regards, Roman.

Hi,

MaxButtons plugin developer here (late to the party). I’m not sure if I missed anything, but you can easily center the text of buttons via the button editor, there are options for alignment. Margins can also be set within the plugin.

You can always ask us for support here - https://wordpress.org/support/plugin/maxbuttons