Css center ul li inside div

Question

How can I Center this ul li inside the following div / nav, I used Basic bootstrap classes

 <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Start</a></li>
                    <li><a href="#">foo</a></li>
                    <li><a href="#">nav1</a></li>
                    <li><a href="#">nav2</a></li>
                    <li><a href="#">nav3</a></li>
                    <li><a href="#">nav4</a></li>
                    <li><a href="#">nav5</a></li>
                    <li><a href="#">nav6</a></li>
                </ul>
            </div>
        </div>
    </nav>

in center horizontal or verticall – Bhargav Chudasama Jun 19 '17 at 13:34 — Bhargav Chudasama, Jun 19 '17 at 13:34

score 1 · Answer 1 · edited Jun 27 '17 at 13:36

1

Simple cross platform way to do it:

.container #app-navbar-collapse {
  width: 100%
}

#app-navbar-collapse ul {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Way more cross platform than flexbox. If you're going to go the flex route, use proper fallbacks, ie:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Otherwise that stuff is going to look broken on iOS/safari/IE, etc

edited Jun 27 '17 at 13:36

Matt

74,352
26
153
180

answered Jun 19 '17 at 13:56

Afrophysics

579
3
14

Technically you only need the `-webkit` prefix to have >95% support. So support really is not that bad http://caniuse.com/#search=flex – Christoph Jun 19 '17 at 14:39
1

I don't understand why this was edited. My original answer provides over 97% compatibility according to caniuse. The modified answer is less. -moz prefix is still needed for any version of firefox =< 18.0 – Afrophysics Jun 19 '17 at 16:56
1) Pretty much no one uses such a FF version. User running this version have other problems than worrying about misaligned content. There are litteraly more Internet Explorer 6 users. Why did you not account for these? 2) This is the support for an older specification so it should not be used anyway. So the command for centering the content is different anyway. Promoting outdated information is not really helpful. If it was for me, I would drop all prefixes except the webkit one. Also you did not include the code for actually centering the content... – Christoph Jun 19 '17 at 19:20

Daniel Mizerski · Answer 2 · 2017-06-19T13:22:18.653

0

Style for div, use flexbox:

.container {
  display: flex;
  justify-content: center;
}

Codepen: here

But to be honest I will attach it to something like .container--centered class to not pollute the bootstrap.

edited Jun 19 '17 at 13:22

answered Jun 19 '17 at 13:16

Daniel Mizerski

1,123
1
8
24

So I just Change the `.container` class Name to `.container--centered ` ? – Olipol Jun 19 '17 at 13:35
No. You have to add this class to container so... `class="container container--centered` and add my rule as `.container--centered { display: flex; justify-content: center; }` – Daniel Mizerski Jun 19 '17 at 13:36
hmm did not work I will have a Close look at it, I got another question why did you define your class Name like this `...--...` – Olipol Jun 19 '17 at 13:42
This is called BEM, it's convention :)... After all - look on my snippet, show me your code please. – Daniel Mizerski Jun 19 '17 at 13:44

Css center ul li inside div

2 Answers2