CODEWITHSUNDEEP
css
Chris
Chris

Reputation: 59491

Problems with centering <ul> in <div>

I've looked up on how to center an unordered list and found many solutions. For some reason, I can't get it to work though. What am I doing wrong?

HTML:

<section id="gallery">
    <ul>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
    </ul>
</section>

CSS:

#gallery {
    text-align: center;
}

#gallery ul{
    display: inline-block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    width: 250px;
    height: 250px;
    margin: 2.5%;
    float: left;
}

EDIT: Screenshot - https://i.sstatic.net/LoN4n.jpg

Upvotes: 0

Views: 38

Answers (1)

specialone
specialone

Reputation: 130

I guess what you want to do is centre the list list.

Firstly make your ul as display:block; Secondly remove your float on li and make them display:inline-block;

As the gallery you had set text-align:center. All inline-block element will center themselves and also always put vertical-align on inline-block as the default I think is set as baseline.

HTML

<section id="gallery">
<ul>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
</ul>

CSS

#gallery {
text-align: center;
width:100%;

    background:blue;
}
#gallery ul{
    display:block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    width: 50px;
    height: 50px;
    margin: 2.5%;
}

#gallery ul li {
    background-color:red;
}

DEMO

Let me know if you have any questions.

Upvotes: 1

Related Questions