https://jsfiddle.net/z4shndrp/4/
how to make an ul element center with flexbox?
1 Like
justify-content-center
align-items-center
display: flex
All 3 in one code:
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
justify-content — controls alignment of all items on the main axis.
align-items — controls alignment of all items on the cross axis.
You can use only justify-content
https://jsfiddle.net/z4shndrp/21/
Just work horizontal and also set vertical but that not show in this fiddle any idea? Set both options.
You mean vertical?
I dont understand you … Do you want to your nav be on one line (horizontally)?
in your css type this:
ul li {
display: inline-block;
}
https://jsfiddle.net/z4shndrp/21/
Just want to be centered both axis. If set both to center that why not show center both axis?
Thanks
Because ul and li are by default block level elements
You need li to be inline-block…
ul li {
display: inline-block;
}
1 Like
They are technically centered on both axis. Check out this codepen: https://codepen.io/drding/pen/MVNzPg
If you’ll note, test2 (the one that uses flexbox) you can see it’s aligned both vertically and horizontally. Meanwhile test1 uses margin: auto 0 and inline-block like @stefika mentioned.
Here are a couple of handy guides I’ve been using to learn flexbox:
https://yoksel.github.io/flex-cheatsheet/ (this one is particularly awesome because you can mess around with the flex settings directly on the page)
3 Likes
I talk about center the UL with LI tags on the screen?