CODEWITHSUNDEEP
htmlcss
user1072337
user1072337

Reputation: 12935

ul list not centering (css and html)

<div class="companies">
        <ul class="logos">
        <li><img src="images/image1.png" alt="" height="25px" /></li>
        <li><img src="images/image2.png" alt="" height="25px" /></li>
        <li><img src="images/image3.png" alt="" height="25px" /></li>
        <li><img src="images/image4.png" alt="" height="25px" /></li>
        <li><img src="images/image5.png" alt="" height="25px" /></li>
        </ul>
        </div>

/* Logos */
.companies {
    width:100%;
}


ul.logos {
    list-style:none;
    margin:0 auto;
}

ul.logos li {
    display: inline-block;
    padding: 0 1em 0 0;
    vertical-align: middle;
}

The ul list is still sticking to the left, and is not centering as expected using margin:0 auto;

I don't want to specify the width, I would like it to resize the list with the screen size.

Upvotes: 1

Views: 96

Answers (5)

rayees
rayees

Reputation: 137

Just change your css rule to this.

.companies {
    width:100%;
    text-align : center;
}

check out here, https://jsfiddle.net/rbt23rx2/

Upvotes: 0

mightyheptagon
mightyheptagon

Reputation: 170

It is actually due to the lack of width property of the class ul.logos, without specifying this property the ul.logos will be in 100% width.

There are at least two ways to solve your problem:

  1. add a text-align: center to ul.logos; or

  2. add a width property to ul.logos

Upvotes: 1

johannesMatevosyan
johannesMatevosyan

Reputation: 2208

You can achieve centering of images by applying text-align:center; property to companies class:

.companies {
    width:100%;
    text-align:center;
}

Please check the link: https://jsfiddle.net/johannesMt/w65v670o/2/

Upvotes: 1

jameson
jameson

Reputation: 201

Unfortunately, margin: 0 auto; only works if you specify a width. However, I was able to center this by using text-align: center; Here's a JSFiddle

.companies {
    width:100%;
    text-align: center;
}

Upvotes: 1

pablito.aven
pablito.aven

Reputation: 1165

You can center it by setting it's container div CSS property text-align.

.companies{
    width:100%;
    text-align:center;
}

Upvotes: 3

Related Questions