Question

我已经查看了如何集中无序列表并找到了许多解决方案。出于某种原因，我无法让它工作。我做错了什么？

HTML：

<section id="gallery">
    <ul>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
        <li style="background-image: url('.....');"></li>
    </ul>
</section>

CSS：

#gallery {
    text-align: center;
}

#gallery ul{
    display: inline-block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    width: 250px;
    height: 250px;
    margin: 2.5%;
    float: left;
}

编辑：屏幕截图 - http://i.imgur.com/v2vfM9H.jpg

Answer 1

我想你想要做的是将列表列表居中。

首先将你的ul作为显示：block; 然后移除li上的浮动并使它们显示：inline-block;

作为画廊，您设置了text-align：center。所有内联块元素都将自身居中，并且始终将vertical-align放在内联块上，因为我认为默认设置为基线。

<强> HTML

<section id="gallery">
<ul>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
    <li style="background-image: url('.....');"></li>
</ul>

<强> CSS

#gallery {
text-align: center;
width:100%;

    background:blue;
}
#gallery ul{
    display:block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    width: 50px;
    height: 50px;
    margin: 2.5%;
}

#gallery ul li {
    background-color:red;
}

DEMO

如果您有任何问题，请与我们联系。

在<div> </div> </ul>中居中<ul>的问题

1 个答案: