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>

Answer 2

您需要删除列表项上的浮动并将其更改为inline-block。

    #newsbar li{
        text-align: left;
        display: inline-block;
        max-width: 300px;
        margin: 15px 20px;
    }

更新了小提琴：http://jsfiddle.net/0g9z5mmw/4/

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

2 个答案: