CODEWITHSUNDEEP
htmlcss
Pinkie
Pinkie

Reputation: 10246

How do I center list items inside a UL element?

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can't seem to figure it out. 

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Check jsfiddle http://jsfiddle.net/3Ezx2/1/

Upvotes: 69

Views: 284821

Answers (14)

Nazmul Haque
Nazmul Haque

Reputation: 868

// Ul css

ul{
  width: 100%;
  justify-content: center;
  list-style-type: none;
  display: flex;

}

// ul li css

ul li{
  display: inline;
}

Upvotes: 0

daxter-army
daxter-army

Reputation: 11

The thing is ul tag comes with default margin and padding, therefore all you need to do is:

ul {
    margin: 0px;
    padding: 0px;
}

Upvotes: 1

Divya kamboj
Divya kamboj

Reputation: 1

I overcame the problem with this solution.

HTML:

<div class="list-wrapper">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
</div>

CSS:

.list-wrapper {
   text-align: -webkit-center;
}
.list-wrapper ul {
    display:block;
}

Upvotes: -1

KeyC0de
KeyC0de

Reputation: 5257

In Bootstrap (4) use display: inline-flex, like so:

li {
    display: inline-flex;
    /* ... */
}

Upvotes: 0

Rahul Mahto
Rahul Mahto

Reputation: 23

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}

Upvotes: 2

Gediminas Šukys
Gediminas Šukys

Reputation: 7391

Another way to do this:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

ul {
  width: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

ul li {
  float: left;
  list-style: none;
  margin-right: 1rem;
}

http://jsfiddle.net/f6qgf24m/

Upvotes: 2

WalterTheSoyBoy
WalterTheSoyBoy

Reputation: 21

I had a problem slimier to yours I this quick and its the best solution I have found so far.

What the output looks like

Shows what the output of the code looks like The borders are just to show the spacing and are not needed.

Html:

    <div class="center">
      <ul class="dots">
        <span>
          <li></li>
          <li></li>
          <li></li>
        </span>
      </ul>
    </div>

CSS:

    ul {list-style-type: none;}
    ul li{
        display: inline-block;
        padding: 2px;
        border: 2px solid black;
        border-radius: 5px;}
    .center{
        width: 100%;
        border: 3px solid black;}
    .dots{
        padding: 0px;
        border: 5px solid red;
        text-align: center;}
    span{
        width: 100%;
        border: 5px solid blue;}

Not everything here is needed to center the list items.

You can cut the css down to this to get the same effect:

    ul {list-style-type: none;}
    ul li{display: inline-block;}
    .center{width: 100%;}
    .dots{
        text-align: center;
        padding: 0px;}
    span{width: 100%;}

Upvotes: 1

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

Neither text-align:center nor display:inline-block worked for me on their own, but combining both did:

ul {
  text-align: center;
}
li {
  display: inline-block;
}

Upvotes: 0

Lyra
Lyra

Reputation: 27

I added the div line and it did the trick: 

<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

Upvotes: 1

hamncheez
hamncheez

Reputation: 739

A more modern way is to use flexbox:

ul{
  list-style-type:none;
  display:flex;
  justify-content: center;

}
ul li{
  display: list-item;
  background: black;
  padding: 5px 10px;
  color:white;
  margin: 0 3px;
}
div{
  background: wheat;
}
<div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>  

</div>

Upvotes: 27

jacobedawson
jacobedawson

Reputation: 3202

I have run into this issue before and found that sometimes padding is the issue.

By removing padding from the ul, any li's set to inline-block will be nicely centred: 

* {
	box-sizing: border-box;
}

ul {
	width: 120px;
	margin: auto;
	text-align: center;
	border: 1px solid black;
}

li {
	display: inline-block;
}

ul.no_pad {
	padding: 0;
}

p {
	margin: auto;
	text-align: center;
}

.break {
	margin: 50px 10px;
}
<div>  
		<p>With Padding (Default Style)</p>
            <ul class="with_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
		<div class="break"></div>
		<p>No Padding (Padding: 0)</p>
			<ul class="no_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
	<div>

Hope that helps anyone running into this same issue :)

Cheers,

Jake

Upvotes: 3

Pencilcheck
Pencilcheck

Reputation: 2912

Looks like all you need is text-align: center; in ul

Upvotes: 15

Kishore Kumar
Kishore Kumar

Reputation: 12864

li{
    display:table;
    margin:0px auto 0px auto;
}

This should work.

Upvotes: 24

sandeep
sandeep

Reputation: 92803

write display:inline-block instead of float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/

Upvotes: 135

Related Questions