CODEWITHSUNDEEP
htmlcsslisthtml-listscenter
nathan hartmann
nathan hartmann

Reputation: 95

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%;
}

Upvotes: 0

Views: 192

Answers (3)

frezier
frezier

Reputation: 1

Try to clear browser css setting before adding yours also it is better to share complete style sheet we should know if there is conflict or inheritance

Upvotes: 0

Maria Fernanda Segovia
Maria Fernanda Segovia

Reputation: 21

.mainImage remains the same

.mainImage{
  height:275px;
  width:275px;
}

in .mainImageUl ul would change to .mainImageUl

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

.mainImageUl li you should use margin only if you only want to achieve a space between each image

.mainImageUl li{
          margin: 30px 0;
        }

Upvotes: 1

I. Johnson
I. Johnson

Reputation: 280

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

Upvotes: 2

Related Questions