Center Text on Homeapge Images

It would be nice if you could provide a screenshot with an arrow pointing to the text you want to be centered. Otherwise I would have to guess.

Oh, awfully sorry. I wasn’t clear at all was I? Teach me to start work at 6:30am on New Years Day…….

It’s the text underneath the Recent Recipe images on the home page, “Apple Mango Grapefruit Juice”, “Orange Mango Ginger Smoothie” etc.

The screenshot is here.

Thanks very much for your help and Happy New Year ??

Well, you can center the text which is wrapped in the <a> easily by making it being displayed as block but then other things start to break (there are no longer 3 columns on each line). This is the code for it:

h3.post-title a {
    text-align: center;
    margin-left: 0;
}

I’m not familiar with all your css so if you know how to fix this next issue, good. I’m going to try to come up with something too.

Try this in style.css Line 571

.archive .post-title, .post-title a, .post-title a:hover, .post-title a:visited {
margin-left: 18px;
}

Alright, I came up with a more complex CSS. After you apply it, it will look like this (chrome):
Screenshot

.two-columns .homepage_pane {
    width: 33% !important;
}

h3.post-title {
    width: 100%;
}

h3.post-title a {
   margin: 0;
}

.homepage_pane {
    text-align: center;
}

.homepage_pane > a {
    display: block;
}

.homepage_pane img {
    float: none;
}

.clearfix:before {
    display: none;
}

If it is not what you wanted, let me know ?? Happy New Year!

Tried the other two solutions with no joy. Give me a sec and I’ll give this last one a go. ??

@lamosty, that’s exactly what I want (except maybe spread the text over two lines, but first thing’s first!!). I’ve tried your CSS but it’s not coming out the same way for me as it has for you. I’m guessing there might be a conflict somewhere.

I’ll have a play about with it all in my Child There / Firebug and if I can’t figure it out I’ll pop back here.

Really grateful for your help ??

I think you forgot to change one thing:

From this:

.two-columns .homepage_pane {
   width: 30% !important;
}

to this:

.two-columns .homepage_pane {
width: 33% !important;
}

That should solve the column-ing issue (3 columns placed to each other)

I did forget to change it, thanks for the reminder! However, now that it’s changed it’s pushed the columns out to two instead of three….

I think I got it. Add/change this:

.two-columns .homepage_pane {
   width: 32% !important;
}

.homepage_pane h3.post-title > a {
    display: block;
    margin: 0 auto;
    width: 60%;
}

You can change how wide the text is by adjusting that width: 60% property. If columns break, change and play the first width: 32% !important to lower value. Different browsers might unfortunately react to those small numbers differently so try to find the best value for it :).

Yayyyyyyyy *Happy Dance* Thanks so very much. I’ve had a play about with some bits and pieces you provided and this is the one that works, in chrome at least:

.homepage_pane h3.post-title > a {
    display: block;
    margin: 0 auto;
    width: 60%;}

.clearfix:before {display: none;}

.homepage_pane {text-align: center;}

.homepage_pane > a {display: block;}

I can’t thank you enough, this has been driving me bananas since yesterday morning. Thanks again and Happy New Year ??

I’m glad I could be of help to you. Enjoy the rest of the day ??