How to horizontally align ul to center of div

Question

I am trying to center a  lt ul gt  inside a  lt div gt   I tried the following  text-align  center    and  left  50     This is not working   CSS    container        clear  both       width  800px       height  70px       margin-bottom  10px      text-align  center      container ul        padding  0 0 0 20px       margin  0       list-style  none      container ul li        margin  0       padding  0       I want the ul to be centered inside the container

User · Answer

You can check this solved your problem          headermenu ul           text-align  center             headermenu li    list-style-type  none          display  inline-block             headermenu ul li a          float  left          http   jsfiddle net thirtydot VCZgW

User · Answer

Make the left and right margins of your UL auto and assign it a width    headermenu ul       margin  0 auto      width  620px      Edit  As kleinfreund has suggested  you can also center align the container and give the ul an inline-block display  but you then also have to give the LIs either a left float or an inline display    headermenu        text-align  center     headermenu ul        display  inline-block     headermenu ul li       float  left     or display  inline

User · Answer

ul   width  90        list-style-type none      margin auto      padding 0      position relative      left 5

User · Answer

Following is a list of solutions to centering things in CSS horizontally  The snippet includes all of them    x000D   x000D  html   x000D    font  1 25em 1 5 Georgia  Times  serif  x000D    x000D   x000D  pre   x000D    color   fff  x000D    background-color   333  x000D    padding  10px  x000D    x000D   x000D  blockquote   x000D    max-width  400px  x000D    background-color   e0f0d1  x000D    x000D   x000D  blockquote  gt  p   x000D    font-style  italic  x000D    x000D   x000D  blockquote  gt  p first-of-type  before   x000D    content  open-quote  x000D    x000D   x000D  blockquote  gt  p last-of-type  after   x000D    content  close-quote  x000D    x000D   x000D  blockquote  gt  footer  before   x000D    content    2014   x000D    x000D   x000D   container  x000D  blockquote   x000D    position  relative  x000D    padding  20px  x000D    x000D   x000D   container   x000D    background-color  tomato  x000D    x000D   x000D   container  after  x000D  blockquote  after   x000D    position  absolute  x000D    right  0  x000D    bottom  0  x000D    padding  2px 10px  x000D    border  1px dotted  000  x000D    background-color   fff  x000D    x000D   x000D   container  after   x000D    content    container-  attr data-num   x000D    z-index  1  x000D    x000D   x000D  blockquote  after   x000D    content    quote-  attr data-num   x000D    z-index  2  x000D    x000D   x000D   container-4   x000D    margin-bottom  200px  x000D    x000D   x000D      x000D     Solution 1 x000D      x000D   quote-1   x000D    max-width  400px  x000D    margin-right  auto  x000D    margin-left  auto  x000D    x000D   x000D      x000D     Solution 2 x000D      x000D   container-2   x000D    text-align  center  x000D    x000D   x000D   quote-2   x000D    display  inline-block  x000D    text-align  left  x000D    x000D   x000D      x000D     Solution 3 x000D      x000D   quote-3   x000D    display  table  x000D    margin-right  auto  x000D    margin-left  auto  x000D    x000D   x000D      x000D     Solution 4 x000D      x000D   container-4   x000D    position  relative  x000D    x000D   x000D   quote-4   x000D    position  absolute  x000D    left  50   x000D    transform  translateX -50    x000D    x000D   x000D      x000D     Solution 5 x000D      x000D   container-5   x000D    display  flex  x000D    justify-content  center  x000D    x000D   lt main gt  x000D     lt h1 gt CSS  Horizontal Centering lt  h1 gt  x000D   x000D     lt h2 gt Uncentered Example lt  h2 gt  x000D     lt p gt This is the scenario  We have a container with an element inside of it that we want to center  I just added a little padding and background colors so both elements are distinquishable  lt  p gt  x000D   x000D     lt div class  container  container-0  data-num  0  gt  x000D       lt blockquote class  quote-0  data-num  0  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   x000D     lt h2 gt Solution 1  Using  lt code gt max-width lt  code gt   amp   lt code gt margin lt  code gt   IE7  lt  h2 gt  x000D   x000D     lt p gt This method is widely used  The upside here is that only the element which one wants to center needs rules  lt  p gt  x000D   x000D   lt pre gt  lt code gt  quote-1   x000D    max-width  400px  x000D    margin-right  auto  x000D    margin-left  auto  x000D    lt  code gt  lt  pre gt  x000D   x000D     lt div class  container  container-1  data-num  1  gt  x000D       lt blockquote class  quote  quote-1  data-num  1  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   x000D     lt h2 gt Solution 2  Using  lt code gt display  inline-block lt  code gt  and  lt code gt text-align lt  code gt   IE8  lt  h2 gt  x000D   x000D     lt p gt This method utilizes that  lt code gt inline-block lt  code gt  elements are treated as text and as such they are affected by the  lt code gt text-align lt  code gt  property  This does not rely on a fixed width which is an upside  This is helpful for when you don   t know the number of elements in a container for example  lt  p gt  x000D   x000D   lt pre gt  lt code gt  container-2   x000D    text-align  center  x000D    x000D   x000D   quote-2   x000D    display  inline-block  x000D    text-align  left  x000D    lt  code gt  lt  pre gt  x000D   x000D     lt div class  container  container-2  data-num  2  gt  x000D       lt blockquote class  quote  quote-2  data-num  2  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   x000D     lt h2 gt Solution 3  Using  lt code gt display  table lt  code gt  and  lt code gt margin lt  code gt   IE8  lt  h2 gt  x000D   x000D     lt p gt Very similar to the second solution but only requires to apply rules on the element that is to be centered  lt  p gt  x000D   x000D   lt pre gt  lt code gt  quote-3   x000D    display  table  x000D    margin-right  auto  x000D    margin-left  auto  x000D    lt  code gt  lt  pre gt  x000D   x000D     lt div class  container  container-3  data-num  3  gt  x000D       lt blockquote class  quote  quote-3  data-num  3  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   x000D     lt h2 gt Solution 4  Using  lt code gt translate   lt  code gt  and  lt code gt position lt  code gt   IE9  lt  h2 gt  x000D   x000D     lt p gt Don   t use as a general approach for horizontal centering elements  The downside here is that the centered element will be removed from the document flow  Notice the container shrinking to zero height with only the padding keeping it visible  This is what  lt i gt removing an element from the document flow lt  i gt  means  lt  p gt  x000D   x000D     lt p gt There are however applications for this technique  For example  it works for  lt b gt vertically lt  b gt  centering by using  lt code gt top lt  code gt  or  lt code gt bottom lt  code gt  together with  lt code gt translateY   lt  code gt   lt  p gt  x000D   x000D   lt pre gt  lt code gt  container-4   x000D      position  relative  x000D    x000D   x000D   quote-4   x000D    position  absolute  x000D    left  50   x000D    transform  translateX -50    x000D    lt  code gt  lt  pre gt  x000D   x000D     lt div class  container  container-4  data-num  4  gt  x000D       lt blockquote class  quote  quote-4  data-num  4  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   x000D     lt h2 gt Solution 5  Using Flexible Box Layout Module  IE10  with vendor prefix  lt  h2 gt  x000D   x000D     lt p gt  lt  p gt  x000D   x000D   lt pre gt  lt code gt  container-5   x000D    display  flex  x000D    justify-content  center  x000D    lt  code gt  lt  pre gt  x000D   x000D     lt div class  container  container-5  data-num  5  gt  x000D       lt blockquote class  quote  quote-5  data-num  5  gt  x000D         lt p gt My friend Data  You see things with the wonder of a child  And that makes you more human than any of us  lt  p gt  x000D         lt footer gt Tasha Yar about Data lt  footer gt  x000D       lt  blockquote gt  x000D     lt  div gt  x000D   lt  main gt  x000D   x000D   x000D      display  flex   container     display  flex    justify-content  center      Notes    It   s not a hack  Browser support  flexbox     max-width  amp  margin  You can horizontally center a block-level element by assigning a fixed width and setting margin-right and margin-left to auto    container ul        for IE below version 7 use  width  instead of  max-width       max-width  800px    margin-right  auto    margin-left  auto      Notes    No container needed  Requires  maximum  width of the centered element to be known      IE9   transform  translatex -50    amp  left  50   This is similar to the quirky centering method which uses absolute positioning and negative margins    container     position  relative      container ul     position  absolute    left  50     transform  translatex -50        Notes    The centered element will be removed from document flow  All elements will completely ignore of the centered element   This technique allows vertical centering by using top instead of left and translateY   instead of translateX    The two can even be combined   Browser support  transform2d     IE8   display  table  amp  margin  Just like the first solution  you use auto values for right and left margins  but don   t assign a width  If you don   t need to support IE7 and below  this is better suited  although it feels kind of hacky to use the table property value for display    container ul     display  table    margin-right  auto    margin-left  auto        IE8   display  inline-block  amp  text-align  Centering an element just like you would do with regular text is possible as well  Downside  You need to assign values to both a container and the element itself    container     text-align  center      container ul     display  inline-block        One most likely needs to realign flow content      text-align  initial      Notes    Does not require to specify a  maximum  width  Aligns flow content to the center  potentially unwanted side effect   Works kind of well with a dynamic number of menu items  i e  in cases where you can   t know the width a single item will take up

User · Answer

ul         text-align  center        list-style  inside

[html] How to horizontally align ul to center of div?

Examples related to html

Examples related to css

Examples related to centering