How can I center

into a div?

Question

How can I center an unordered list of <li> into a fixed-width div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

score 173 · Answer 1 · edited May 14 '16 at 21:25

173

To center the ul and also have the li elements centered in it as well, and make the width of the ul change dynamically, use display: inline-block; and wrap it in a centered div.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

Update

Here is a jsFiddle link to the code above.

edited May 14 '16 at 21:25

Adrian

16,233
18
112
180

answered Jul 30 '11 at 12:05

Aram Kocharyan

20,165
11
81
96

That's the trouble I had with the other solutions, it wouldn't work for the li elements if I changed them. – Aram Kocharyan Sep 25 '11 at 04:46
I was using this for Bootstrap 3 nav and needed to add `float: none;` to the `ul`. – Dylan Valade Apr 02 '14 at 14:26

Quentin · Accepted Answer · 2009-11-10T13:54:11.577

152

Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.

ul {
    width: 70%;
    margin: auto;
}

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

edited Nov 10 '09 at 13:54

answered Nov 10 '09 at 13:48

Quentin

914,110
126
1,211
1,335

4

if this does not make you happy, this probably will: http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu – Bruiser Dec 07 '11 at 16:18
12

Setting width:auto; and display:inline-block; would allow your ul behave like a line of text. You could then use text-align:center; on the parent element. This would also allow your ul to grow and shrink as inner content changes, opposed to having a fixed width. – i_a Feb 07 '14 at 20:00
1

@Chetabahana — You're looking at the text, not the element: http://jsfiddle.net/qwbexxog/3/ – Quentin May 28 '18 at 13:31
not working fine with all resolutions, flex center is working – Srinivas08 Aug 10 '20 at 07:10

score 63 · Answer 3 · answered Jun 16 '18 at 23:00

63

I love flexbox:

ul {
  justify-content: center;
  display: flex;
}

answered Jun 16 '18 at 23:00

Christian Michael

2,128
1
19
27

Dashrath · Answer 4 · 2016-01-14T19:38:23.220

24

Steps :

Write style="text-align:center;" to parent div of ul
Write style="display:inline-table;" to ul
Write style="display:inline;" to li

or use

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

edited Jan 14 '16 at 19:38

answered Aug 29 '12 at 19:54

Dashrath

2,141
1
28
33

We have to add margin, otherwise is nested each other check here http://jsfiddle.net/qwbexxog/4/ – eQ19 May 28 '18 at 13:41
This answer saved me! – Huan Nov 06 '20 at 11:14

score 10 · Answer 5 · answered May 16 '16 at 13:48

This is a better way to center UL's inside of any DIV container.

This CSS solution does not use Width and Float properties. Float:Left and Width: 70%, will cause you headaches when you need to duplicate your menu on different pages with different menu items.

Instead of using width, we use padding and margin to determine the space around the text/menu item. Also, instead of using Float:Left in the LI element, use display:inline-block.

By floating your LI left, you literally float your content to the left and then you must use one of the Hacks mentioned above to center your UL. Display:inline-block creates your Float property for you (sort of). It takes your LI element and turns it into a block element that lays side by side each other (not floating).

With Responsive design and using frameworks like Bootstrap or Foundation, there will be issues when trying to float and center content. They have some built-in classes, but it's always better to do it from scratch. This solution is much better for dynamic menus (Such as Adobe Business Catalyst menu system).

Reference for this tutorial can be found at: http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

score 6 · Answer 6 · answered Nov 10 '09 at 13:48

6

Could either be

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

or

div li
{
text-align: center;
}

depends on how it should look like (or combining those)

answered Nov 10 '09 at 13:48

F.P

17,421
34
123
189

2

The latter option wouldn't center the list items, only their inline content. – Quentin Nov 10 '09 at 13:52
Still, if the `
` aren't styled, it looks the same.

F.P

Nov 10 '09 at 14:33

score 4 · Answer 7 · answered Nov 10 '09 at 13:48

To center a block object (e.g. the ul) you need to set a width on it and then you can set that objects left and right margins to auto.

To center the inline content of block object (e.g. the inline content of li) you can set the css property text-align: center;.

Plippie · Answer 8 · 2012-05-03T11:02:27.290

1

Interesting but try this with floated li elements inside the ul: Example here

The problem now: the ul needs a fixed width to actually sit in the center. However we want to be it relative to the container width (or dynamic), margin: 0 auto on the ul does not work.

A better way is to let go of UL/Li list and use a different approach example here

edited May 03 '12 at 11:02

answered May 03 '12 at 10:32

Plippie

2,836
33
28

score 1 · Answer 9 · answered Nov 10 '09 at 13:47

1

Try

div#divID ul {margin:0 auto;}

answered Nov 10 '09 at 13:47

Keir

483
3
10

score 1 · Answer 10 · answered Nov 10 '09 at 14:46

1

Just add text-align: center; to your <ul>. Problem solved.

answered Nov 10 '09 at 14:46

Jonny Haynes

3,146
1
27
41

score 0 · Answer 11 · answered Nov 10 '09 at 13:49

If you know the width of the ul then you can simply set the margin of the ul to 0 auto;

This will align the ul in the middle of the containing div

Example:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }

score 0 · Answer 12 · answered Mar 15 '14 at 08:06

0

Here is the solution I could find:

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

answered Mar 15 '14 at 08:06

Adam Boostani

5,999
9
38
44

score 0 · Answer 13 · answered Mar 20 '14 at 12:56

Another option is:

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>

CSS:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

score 0 · Answer 14 · answered May 28 '18 at 18:00

I have been looking for the same case and tried all answers by change the width of <li>.
Unfortunately all were failed to get the same distance on left and right of the <ul> box.

The closest match is this answer but it needs to adjust the change of width with padding

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

See the result below, all distance between <li> also to the <ul> box are the same.

You may check it on this jsFiddle:
http://jsfiddle.net/qwbexxog/14/

score -1 · Answer 15 · answered Nov 27 '09 at 13:05

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

score -5 · Answer 16 · answered Nov 10 '09 at 13:48

-5

use oldschool center-tags

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

answered Nov 10 '09 at 13:48

justastefan

595
5
18

You should avoid using style-type expressions in markup-code. That's what CSS was made for! – F.P Nov 10 '09 at 13:50
1

Workable but do note that: "The `center` element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD" from http://www.w3schools.com/TAGS/tag_center.asp – o.k.w Nov 10 '09 at 13:50
4

*sigh* W3Schools providing incomplete, wrong information as usual. It was deprecated in 4.0 not 4.01, and doesn't appear in any Strict variant (singling out XHTML 1.0 is an odd choice). – Quentin Nov 10 '09 at 13:51
As mentioned before these were deprecated in HTML 4.01 ... also that's just bad practice ... – Jonny Haynes Nov 26 '09 at 08:33
2

Yes, he shouldn't use this kind of tag, but this is not a reason to deserve a negative answer. Sometimes, we want the fatest solution. And for me this answer is positive. – workdreamer Sep 22 '11 at 11:25

How can I center

into a div?

16 Answers16

Linked

Related

How can I center into a div?

16 Answers16

Linked

Related

How can I center

into a div?