css - 宽度乘以最宽的 ，以 为中心

Question

好吧，我就是想不通。我有一个固定宽度的 div，它应该包含一个元素列表(图标、名称、价格等)。 li 内容应左对齐，但整个列表应居中。

这基本上是我的想法:

这是一个 fiddle没有我通过内联 block 解决这个问题的可悲尝试。

    <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 的内容s 将变得不对齐。)

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