How to center inline blocks?

User 2659880 Photo


Registered User
8 posts


I'm trying to center some inline blocks but I can't see any way to add text-align: center to the outer container. How can I do this?
User 434929 Photo


Ambassador
938 posts

The project file helps better if you could upload and share.

Or Please describe which element you are using or trying to center it

Try to reduce the width % to desired size >>> Margin Left and right Auto >>> then display as Block or Table .

If it is Text Element then in typography section apply " text-align center "

Try out and see the result.

Note: Each element behaves differently and depends on which element your using .
Guys at coffeecup are awesometacular.
User 232214 Photo


COO
827 posts

Shane wrote:

I'm trying to center some inline blocks but I can't see any way to add text-align: center to the outer container. How can I do this?

This is useful for a navigation menu with text link element placed next to each other (inline-block). You are right that setting text-align center to the parent, will center all child elements. Since this can create potential confusion, we did not add this control yet. What we have been doing is to add these elements to a container, giving the container the exact same width as it's children (using a width % in combination with minimal-width) and centering the container using display block and margin left/right set to auto.

That totally works, but since text -align is a very valid approach as well we just decided to add this for typical parent element such as columns and containers in the next build.

Thanks for the note Shane :)
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2659880 Photo


Registered User
8 posts

Bob Visser wrote:

This is useful for a navigation menu with text link element placed next to each other (inline-block). You are right that setting text-align center to the parent, will center all child elements.


Yep, this is exactly what I was trying to do. Thanks Bob

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.