How to center inline blocks?
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?
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 .
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.
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?
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.
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.
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.