Search code examples
htmlcsslisthtml-listscenter

Unordered List in CSS will not center

https://jsfiddle.net/nathanahartmann/5shg6vn7/3/

So I've been trying to get this Unordered List centered. The text-align:center; worked correctly but the items within the list (the pictures and text) for the main content of the page. I just want it to be perfectly centered. I've tried getting rid of padding and margins. I've tried margin: 0px auto;. I can't seem to figure out what I need to do to get this UL to align.

.mainImage{

   height:275px;
   width:275px;
}
.mainImageUl ul{
  list-style-type:none;
  margin:0px auto;
  padding:0px;

}
.mainImageUl li{

  padding:0px;
  display:inline-block;
  float:left;
  height:350px;
  width:100%;
}
Solution

  • User agent styles adds a padding-inline-start: 40px to ul elements.

    I see you have this in your css which should get rid of the padding but you are selecting the class .mainImageUL and a nesting ul element

    .mainImageUl ul{
  list-style-type:none;
  margin:0px auto;
  padding:0px;

}

    change it to this 

    .mainImageUl{
   list-style-type:none;
   margin:0px auto;
   padding:0px;
}

    This will target the correct element and correct your alignment issue