Horizontally Centering/Evenly Distributed <Li> Inside of <Ul> Inside a <Div>

Horizontally centering/evenly distributed li inside of ul inside a div

This allows a widthless centered dynamic ul if you don't want to specify 90% width:

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

Tested in IE6, FX 3.

EDIT: Alternate style without the extraneous element:

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->

How can I center my ul li list inside my div?

Try adding these rules:

.cities-main{ padding: 0; text-align: center; }
.cities-main > li:last-child{ margin-right: 0; }

By doing so, the last link won’t break into a new line due to its margin-right. Also, the first link will be on the left border of its parent element. And altogether their centered.

Here’s a fiddle with it: http://jsfiddle.net/04z3L5gs/

How to center a list item inside a horizontal unordered list?

here a solution for your problem.

In CSS, flex is very usefull, take a look at:

Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

My CSS

I have used flexbox for centered verically divs and set the right div.

For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.

Enjoy

body {

  margin: 0;

  padding: 0;

  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");

  background-repeat: no-repeat;

  background-size: 157.75%;

  background-position-x: 50.825%;

}

li {

  display: inline-block;

}

.navbar {

  overflow: hidden;

  width: 100%;

  height: 60px;

  border-bottom-color: #68e2de;

  border-bottom-width: 1px;

  border-bottom-style: solid;

  

  display: flex;

  align-items:center;

  position:absolute;

}

.navbar {

  list-style: none;

}

.navbar-text {

  color: white;

  float: left;

  font-family: 'Montserrat', sans-serif;

  font-weight: 500;

  font-size: 17px;

  /**padding: 0 38px 0px 4px;**/

}

.logo {

  position:absolute;

  height:100%;

  top:0;

  left:0;

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  pointer-events:none;

}

.logo-container {

  display:flex;

  align-items:center;

  pointer-events:all;

}

.logo-container .ka-logo {

  width: 24px;

}

.left, .right {

  display:flex;

  align-items:center;

}

.left {

  margin:0 10px;

}

.right {

  justify-content:right;

  margin:0 10px 0 auto;

}

#search-icon {

  width: 32px;

  margin-left: -44px;

  margin-top: 8px;

}

#search-bar {

  background-color: #47dcd6;

  border-radius: 4px;

  margin-left: 8px;

  border: 1px solid #47dcd6;

  padding: 12px 175px 14px 12px;

}

#expand-triangle {

  font-size: 13px;

  margin-left: 7px;

  color: #85e8e3;

}

.bold-signika {

  display: inline;

  font-family: 'Signika', sans-serif;

  font-size: 23px;

  color: white;

  font-weight: 600;

}

.signika {

  display: inline;

  font-family: 'Signika', sans-serif;

  color: white;

  font-size: 23px;

}

<!DOCTYPE html>

<html>

<head>

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

  <div class="navbar">

    <div class="left">

      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>

      <li id="search-bar" class="navbar-text">Search</li>

      <li><img id="search-icon" src="search.png"></li>

    </div>

    <div class="logo">

      <div class="logo-container">

          <img class="ka-logo" src="leaf-green.svg">

          <div class="bold-signika">KHAN</div>

          <div class="signika">ACADEMY</div>

        </div>

    </div>

    <div class="right">

      <li class="navbar-text">New user / Sign up</li>

    </div>

  </div>

  <!--<ul class="navbar">

    <div class="left">

      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>

      <li id="search-bar" class="navbar-text">Search</li>

      <li><img id="search-icon" src="search.png"></li>

    </div>

    <div class="center">

      <li>

        <div id="ka">

          <img id="ka-logo" src="leaf-green.svg">

          <div class="bold-signika">KHAN</div>

          <div class="signika">ACADEMY</div>

        </div>

      </li>

    </div>

    <div class="right">

      <li id="sign" class="navbar-text">New user / Sign up</li>

    </div>

  </ul>-->

</body>

</html>

center middle li of evenly spread li in a ul

Method # 01:

Add table-layout: fixed in styles of .strweak-list.

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}

body {

  line-height: 1;

}

ol, ul {

  list-style: none;

}

blockquote, q {

  quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

.strweak-header {

  text-align: center;

}

.strweak-list {

  table-layout: fixed;

  display: table;

  width: 100%;

  list-style: none;

}

.cell {

  display: table-cell;

  text-align: center;

}

<h5 class='strweak-header'>strongAgainst</h5>

<ul class="strweak-list">

  <li class="cell">water</li>

  <li class="cell">ghost</li>

  <li class="cell">ground</li>

</ul>

Distribute and center elements horizontally but limit space between them

You can try flexible boxes:

.nav {
  display: flex;           /* Magic begins */
  justify-content: center; /* Center children */
}
.nav > li {
  flex-grow: 1;            /* Let them grow if there is free space... */
  max-width: 80px;         /* ...but with this limit */
  text-align: center;      /* Center content */
}

.nav {

  display: flex;

  justify-content: center;

  max-width: 320px;

  background-color: #D3D3D3;

  list-style: none;

  margin: 0;

  padding: 0;

}

.nav > li {

  flex-grow: 1;

  max-width: 80px;

  text-align: center;

}

<ul class="nav">

  <li>[1]</li>

  <li>[2]</li>

  <li>[3]</li>

  <li>[4]</li>

  <li>[5]</li>

</ul>

<ul class="nav">

  <li>[1]</li>

  <li>[2]</li>

  <li>[3]</li>

</ul>

<ul class="nav">

  <li>[1]</li>

  <li>[2]</li>

</ul>

Vertically center UL and horizontally align LI children

Just a bit of tweaking to your flexbox layout:

nav {

  width: 780px;

  height: 50px;

  text-align: center;

  background-color: pink;

}

nav ul {

  height: 100%;                     /* take height of nav parent */

  list-style-type: none;

  padding-left: 0;                  /* remove default UL padding */

  display: flex;

  justify-content: space-around;    /* horizontal alignment (applies to child elements) */

  align-items: center;              /* vertical alignment (applied to child elements) */

}

nav ul li {

  /* display: inline-block;         <-- not necessary */

  /* margin: 0 auto;                <-- not necessary */

  padding: 10px;

  background-color: lightgreen;

}

<nav>

  <ul>

    <li>sample</li>

    <li>sample</li>

    <li>sample</li>

  </ul>

</nav>

li inside ul are not evenly spaced

The problem isn't that your lis are spaced differently. All of them are the same distance away from each other and they're all the same exact width. What you're seeing is the result of that: shorter words have more extra space inside of their own li than the longer ones, resulting in a greater amount of whitespace to the right of shorter words and a smaller amount of whitespace to the right of longer words.

For example, take a look at the following:

// Width of one li.
|||||||||||

// Width of each li.
Home|||||||
About||||||
Ideas||||||
Projects|||
Resources||

// Width of all li when inline.
Home|||||||About||||||Ideas||||||Projects|||Resources||
Home       About      Ideas      Projects   Resources

This visualization should show you the exact problem you're encountering. What you want to do isn't having all li the same width--what you want is to have all li the same distance apart. These are two very different things.

If you want to achieve the result of having even spacing, then don't use a grid display, otherwise the columns will remain the same size and will result in the additional whitespace. Instead, consider using something like an inline-block display and setting a margin or padding value.

center justify ul inside column

Please see below. content-menu (center) and content-menu-menu > li (left) adjusted.

.content-menu {

text-align: center;

}

.content-menu-menu {

  float: none;

  padding:0;

  display: inline-block;

}

.content-menu-menu > li {

  color:white;

  padding-top: 10px;

  text-align: left;

}

.content-menu-menu > li > a > img {

  width: 32px;

  height:32px;

  margin-right: 10px;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content-menu">

  <h1 class="content-header">Information</h1>

  <div class="row">

    <div class="col-md-6 col-md-offset-3">

      <ul class="content-menu-menu">

        <li> <a href="#" class="link"><img src="images/info.png">Information</a></li>

        <li> <a href="#" class="link"><img src="images/dollar.png">Pricing</a></li>

        <li> <a href="#" class="link"><img src="images/more.png">Supplements</a></li>

        <li> <a href="#" class="link"><img src="images/placeholder.png">Map</a></li>

      </ul>

    </div>

  </div>

how to center align the images inside li?

Add display: inline block to the li's and text-align: center; to center them.
Add width to each li element so they spread.
Add font-size:0 to the wrapper so the spaces in the HTML do not take up any space.

See full solution:
http://codepen.io/shippin/pen/KWQgoJ

How to distribute elements evenly inside a div?

Left aligned content looks like this (one or more dots represent a whitespace):

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

(1) text-align: justify does not justify the last (or the only) line*. One simple solution is to add a very long word which can only fit on a line of its own:

+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

(2) You want whitespace before the first and after the last word. One simple solution is to add dummy words in order to produce the following result:

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

The desired result can be achieved by adding additional markup. For example:

.row {

    text-align: justify;

}

.row:after {

    display: inline-block;

    content: "";

    width: 100%;

}

.box {

    display: inline-block;

}

.dummy {

    display: inline-block;

}

/**** FOR TESTING ****/

.row {

    margin: 1em 0;

    background: #FC0;

}

.box {

    background: #F0C;

    width: 4em;

    height: 5em;

}

.box:nth-child(even) {

    background: #0CF;

    width: 8em;

}

<div class="row">

    <div class="dummy"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="dummy"></div>

</div>

<div class="row">

    <div class="dummy"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="dummy"></div>

</div>

<div class="row">

    <div class="dummy"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div class="dummy"></div>

</div>

<div class="row">

    <div class="dummy"></div>

    <div class="box"></div>

    <div class="dummy"></div>

</div>

Horizontally Centering/Evenly Distributed <Li> Inside of <Ul> Inside a <Div>