<ul> width by widest <li>，以<div> </div> </li> </ul>为中心

Question

好的，我无法解决这个问题。我有一个固定的宽度div，它应该包含一个元素列表（图标，名称，价格，类似的东西）。 li内容应与左侧对齐，但整个列表应与中心对齐。

这基本上是我的想法：

这里有一个fiddle没有我通过内联块解决这个问题的可怜尝试。

    <div class="wrap">
<ul>
    <li><span class="icon">x</span>
        <span class="name">lorem ipsum</span>  <span class="price">$1,000</span>
        <span class="info">New York City</span>

    </li>
    <li><span class="icon">x</span>
        <span class="name">dolor sit amet inscipiciur edit vole</span>  <span class="price">$3,000</span>
        <span class="info">Boston</span>

    </li>
    <li><span class="icon">x</span>
        <span class="name">syra nasum foedum habet</span>
        <span class="price">$900</span>
        <span class="info">San Francisco</span>

    </li>
</ul>

        .wrap {
    width:300px;
    background:lightgrey;
    font:sans-serif
}
ul, li {
    margin:0;
    padding:0
}
ul {
    border:1px solid blue
}
li {
    list-style-type:none;
    height:40px;
    margin-bottom:20px
}
.icon {
    height:100%;
    display:block;
    margin-right:8px;
    float:left;
    width:30px;
    background:grey
}
.name {
    display:block;
    height:50%;
    background:#aaaaaa
}
.price {
    border:1px solid #4e4e4e;
    border-radius:3px;
    text-transform:uppercase;
    padding:0 3px;
    display:block;
    float:left;
    margin-right:5px
}
.info {
    background:#eeeeee
}

我可以实现吗？

（通常情况下，ul的宽度为100％，设置为display:inline-block时，个别li的内容将会不对齐。）

Answer 1

您可以将text-align:center;用于.wrap，将display:inline-block; text-align:left;用于<ul>：

.wrap {text-align：center;}

ul {
    border:1px solid blue;
    text-align:left;
    display:inline-block;
}

DEMO

Answer 2

如果您希望“整合”整个<ul>（就像这样：http://jsfiddle.net/w4k1Lt4s/3/）

然后只需将margin: 0 auto;添加到wrap类...

Answer 3

应该很简单。如果您将margin: 0 auto;添加到.wrap，则应将包含您的列表的div居中。第一个参数0设置元素顶部和底部的边距，可以是您想要的任何内容，例如10px，但是auto作为第二个参数会自动将边距设置为左右两侧的数量相同。

即

.wrap {
width:300px;
background:lightgrey;
font:sans-serif;
margin: 0 auto;
}