[Solved] Centering Titles in Columns

[siouxfan45]

Here is my codepen: http://codepen.io/anon/pen/iAJrE

I’m attempting to find a way to center the title both vertically and horizontally. I’m also attempting to remove the right margin when the screen is resized @850px.

Any help?

[nixnerd]

Do you know the size of the tiles? Will you always?

[Paulie_D]

Here…this solves the centering issue. I’m not sure why you have a span in a span but I’ve left that.

http://codepen.io/Paulie-D/pen/vkiHu

[nixnerd]

@Paulie_D: A span inside a span is a common technique in recursive CSS. Very popular right now.

[Paulie_D]

Actually, my guess is that the ‘span in a span’ was a holdover from trying to use CSS tables to center the inner span.

Obviously, it’s not necessary here for centering although it does allow us to put a color overlay on the image.

[nixnerd]

I was just joking.

Yeah, OP, there are lots of ways to center a photo or anything really inside a container. As long as you’ll ALWAYS know the size. For theme development, it gets more tricky because you have no idea what someone will upload. That’s where flexbox is pretty handy.

At any rate, what framework/grid system is this? It does not look like you wrote it.

[nixnerd]

@Soronbe:

I actually just used this technique and it works absolutely fine. However… the containers are the problem. If you have a container with styling… like a background color, they won’t all be the same height. That’s something that either requires Flexbox OR some JS.

Sorry… I was a tad vague on that.

[siouxfan45]

@NIX This is my own system, I wrote it.

@Paulie_D Thanks! The span is a leftover as I tried a few different approaches to get to this point.

I won’t always know the size of the image.

[Author]

Posts