How can I center ul li into div

Question

How can I center an unordered list of  lt li gt  into a fixed-width div    x000D   x000D   lt table width  100   gt  x000D     lt tbody gt  x000D     lt tr gt  x000D       lt td width  41   gt  lt img src   web 20100104192317im  http   www studioteknik com html2 html images hors-service jpg  width  400  height  424  gt  lt  td gt  x000D       lt td width  59   gt  lt p align  left  gt  amp nbsp  lt  p gt  x000D         lt h1 align  left  gt StudioTeknik com lt  h1 gt  x000D         lt p gt  lt br align  left  gt  x000D           lt strong gt Marc-Andr   M  nard lt  strong gt  lt  p gt  x000D         lt ul gt  x000D           lt li gt Photographie digitale lt  li gt  x000D           lt li gt Infographie  lt  li gt  x000D           lt li gt D  bug et IT  MAC et PC  lt  li gt  x000D           lt li gt  Retouche  lt  li gt  x000D           lt li gt Site internet lt  li gt  x000D           lt li gt Graphisme lt  li gt  x000D         lt  ul gt  x000D         lt p align  left  gt  lt span class  style1  gt  lt strong gt Cellulaire en suisse    lt  strong gt  lt  span gt  lt a href     gt  41 079 573 48 99 lt  a gt  lt  p gt  x000D         lt p align  left  gt  lt strong class  style1  gt Skype    lt  strong gt   lt a href     gt menardmam lt  a gt  lt  p gt  x000D       lt p align  left  gt  lt strong class  style1  gt Courriel   lt  strong gt  lt a href  https   web archive org web 20100104192317 mailto menardmam hotmail com  gt     info studioteknik com lt  a gt  lt  p gt  lt  td gt  x000D     lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt div class  container  gt           lt ul gt               lt li gt  lt a href     gt Button lt  a gt  lt  li gt               lt li gt  lt a href     gt Button lt  a gt  lt  li gt               lt li gt  lt a href     gt Button lt  a gt  lt  li gt               lt li gt  lt a href     gt Button lt  a gt  lt  li gt               lt li gt  lt a href     gt Button lt  a gt  lt  li gt           lt  ul gt       lt  div gt    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

User · Answer

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

User · Answer

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    lt style type  text css  gt       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         lt  style gt    lt div class  wrapper  gt       lt ul gt           lt li gt Three lt  li gt           lt li gt Blind lt  li gt           lt li gt Mice lt  li gt       lt  ul gt   lt  div gt    Update  Here is a jsFiddle link to the code above

User · Answer

Try   div divID ul  margin 0 auto

User · Answer

I love flexbox   ul     justify-content  center    display  flex

User · Answer

Another option is   HTML   lt nav gt     lt ul class    main-nav  gt       lt li gt  Productos  lt  li gt      lt li gt  Catalogo  lt  li gt      lt li gt  Contact  lt  li gt        lt li gt  Us  lt  li gt     lt  ul gt   lt  nav gt        CSS   nav     text-align  center     nav  main-nav li     float  left    width  20     margin-right  5     font-size  36px    text-align  center

User · Answer

use oldschool center-tags    lt div gt   lt center gt   lt ul gt   lt li gt     lt  li gt   lt  ul gt  lt  center gt   lt  div gt     -

User · Answer

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

User · Answer

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   lt div class  menu  gt    lt ul gt      lt li gt item 1  lt  li gt      lt li gt item 2  lt  li gt      lt li gt item 3  lt  li gt    lt  ul gt   lt  div gt    lt style gt    menu   text-align  center      menu ul   display inline-table      menu li   display inline     lt  style gt

User · Answer

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

User · Answer

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

User · Answer

I have been looking for the same case and tried all answers by change the width of  lt li gt   Unfortunately all were failed to get the same distance on left and right of the  lt ul gt  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  lt li gt  also to the  lt ul gt  box are the same    You may check it on this jsFiddle  http   jsfiddle net qwbexxog 14

User · Answer

lt div id  container  gt     lt table width  100   height  100   gt       lt tr gt         lt td align  center  valign  middle  gt           lt ul gt             lt li gt item 1 lt  li gt             lt li gt item 2 lt  li gt             lt li gt item 3 lt  li gt           lt  ul gt         lt  td gt       lt  tr gt     lt  table gt   lt  div gt

User · Answer

Just add text-align  center  to your  lt ul gt   Problem solved

User · Answer

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    lt div id  container  gt    lt ul gt     lt li gt Item1 lt  li gt     lt li gt Item2 lt  li gt    lt  ul gt   lt div gt    CSS      container ul      width 300px      margin 0 auto

[css] How can I center <ul> <li> into div

Examples related to css

Examples related to html

Examples related to html-lists