无法水平居中<div>包含<ul>

Question

我似乎无法将我的列表放在中心位置.li元素中心很好但似乎我不能让我的ul在页面上居中.

我需要ul或ul的容器宽度:100%; 因为我想要有一个ul的背景,它应该拉伸以填充页面宽度和ul +边缘高度.

我已经浏览了webb,但没有答案似乎符合我的需求,这是我的第一个问题,我是这个场景的新手所以请理解我是否做错了什么.

HTML(使用php在Wordpress中使用)

<div class="body-news">
    <ul id="newsbar">   
            <li>
                <?php dynamic_sidebar( 'in-body-widget-area' ); ?>
            </li>
            <li>
                <?php dynamic_sidebar( 'in-body-widget-area2' ); ?>
            </li>
            <li>
                <?php dynamic_sidebar( 'in-body-widget-area3' ); ?>
            </li>
    </ul>
</div>

CSS

.body-news{
}
    .body-news ul{
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
    }
        #newsbar li{
            text-align: left;
            float: left;
            display:inline;
            width: 300px;
            margin: 15px 20px;
        }

Answer 1

一个简单的解决方案是去除text-align: left从li元件和使用display: table于ul:

.body-news {
}
.body-news ul {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    display: table;
}
#newsbar li {
    float: left;
    display:inline;
    width: 300px;
    margin: 15px 20px;
}

<div class="body-news">
    <ul id="newsbar">
        <li>
            <p>Widget1</p>
        </li>
        <li>
            <p>Widget2</p>
        </li>
        <li>
            <p>Widget3</p>
        </li>
    </ul>
</div>