在div中发布居中的ul元素

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?

我遇到了一个问题,将我的ul元素集中在我的div中。我使用了margin:0 auto技术,但它在这种情况下不起作用。另外,我总是有一个问题,关于是否需要将宽度设置为div中的ul元素来使用边距:0 auto有没有办法解决这个问题?

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

1 个解决方案

#1

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

看看这个小提琴通过在CSS中添加text-align:centerto#sidebar-social-media,问题应该得到解决。

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

积分去了Vitorino Fernandes,我想发表评论,但我没有足够的声誉。