html - 包含 的 水平居中问题

Question

我似乎无法让我的列表居中。 li 元素居中很好，但似乎我无法让我的 ul 居中显示在页面上。

我需要 ul 或 ul 的容器宽度:100%；因为我想要 ul 的背景，它应该拉伸(stretch)以填充页面宽度和 ul+margin 高度。

我环顾了网络，但似乎没有答案符合我的需要，这是我的第一个问题，我是这个场景的新手，所以如果我做错了什么，请理解。

HTML(在 Wordpress 中使用 php)

<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

一个简单的解决方案是从 li 元素中删除 text-align: left 并使用 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>