CODEWITHSUNDEEP
htmlcsshtml-lists
cphill
cphill

Reputation: 5914

Issue centering ul element within div

I am running into an issue centering my ul element within my div. I used the margin: 0 auto technique, but it isn't working in this scenario. In addition, I always had a question related to whether setting the width to a ul element within a div was necessary to use the margin: 0 auto is there a way around this?

html:

<div class="col-3-12">
            <div class="sidebar-personal-information">
                <div id="sidebar-social-media">
                    <ul id="sidebar-social-media-list">
                        <li><img class="sidebar-social-media-icons" src="images/linkedin.png"></li>
                        <li><img class="sidebar-social-media-icons" src="images/twitter.png"></li>
                    </ul>
                </div>
             </div>
           </div>

css:

.sidebar-personal-information {
    background-color: #00a8df;
}

#sidebar-social-media {
    margin: 0 auto;
    padding: 10px;
    vertical-align: center;
}
ul#sidebar-social-media-list{
    width: 100%;
    margin: 0 auto;
}



#sidebar-social-media ul li {
    display: inline;
}

Enclosing Div

Ul Div

Upvotes: 0

Views: 65

Answers (1)

Thomas More
Thomas More

Reputation: 418

Take a look at this Fiddle
By adding text-align: centerto #sidebar-social-media in your CSS the problem should be solved.

Credits go to Vitorino Fernandes, I would like to comment but I don't have enough reputation.

Upvotes: 1

Related Questions