Question

我有以下code。它本质上是一个使用<ul>和<li>标签的简单网格视图。我想让它响应，使<li>元素始终居中，无论屏幕的宽度是多少。我怎么能这样做？我已尝试将padding-left和padding-right设置为百分比，但它不起作用。现在，如果我调整屏幕的宽度，它并不总是保持居中。

Answer 1

只需将text-align: center添加到父<ul>

即可

Fiddle

Answer 2

我将继续前面的回答......

也是UL的中心

#home-listing {
  text-align: center;
    width:80%; /*Pick Your Own Width*/
    margin:16px auto;
}

http://jsfiddle.net/Zd9Gf/3/

Answer 3

这取决于你的中心意思。为了使整个列表居中，您可以执行以下操作：

ul {
    padding: 0px;
    width:500px;
    margin:auto;
}

请参阅this jsFiddle。

Answer 4

添加此课程：

ul.search-results{
    width:100%;
}

并更新此课程：

ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
    width:60%;
    margin:0 20%;
    text-align:center;
}

如何将li元素作为网格视图的中心

4 个答案: