Question

我尝试将我的图片和我的列表对齐在中心，但它不能与margin:0 auto;一起使用。

而且我想让我的图像在左边，我的列表在右边，但反之亦然。

有人看到我做错了吗？

HTML：

<div class="col_12">

    <div class="center">
        <img src="http://upload.wikimedia.org/wikipedia/pt/2/2f/Beyonc%C3%A9_-_Dangerously_in_Love.jpg" width="430" height="430" />
        <ul>
            <li><strong>Test:</strong> 24 july 2003</li>
            <li><strong>Test:</strong> 2002 - 2003;
                <span>Patchwerk Studios</span>
                <span>(Atlanta, Georgia)</span>
                <span>SugarHill Studios</span>
                <span>(Houston, Texas)</span>
                <span>South Beach Studios</span>
                <span>(Miami)</span>
                <span>Baseline Studios</span>
                <span>SoHo Studios</span>
                <span>Sony Music Studios</span>
                <span>COE.BE.3 Studios</span>
                <span>(Stone Mountain, Georgia)</span></li>
            <li><strong>Test:</strong> R&B, Soul</li>
            <li><strong>Test:</strong> Columbia</li>
            <li><strong>Singles:</strong> Crazy in love, Baby boy, Me, myself and I, Naughty Girl</li>
        </ul>
    </div>
</div>

CSS：

.col_12
{
width:100%;
height:auto;
float:left;
margin:0 auto;
padding:15px;
background:#ccc;
}


.col_12 .center{
    margin:0 auto;

    text-align:center;
    background:red;

}

.col_12 p
{
    background-color:#f9f9f9;
    margin-bottom:-10px;
}

.col_12 ul{
    list-style:none;
    float:left;
}

.col_12 ul li{
    text-align:left;
}

.col_12 ul li span{
    display:block;
    margin-left:82px;

}

Answer 1

这是一个获得左侧img和右侧ul的解决方案...请注意，最后两个CSS条目都有一个max-width，以防止一个如果其他项目太大（如果你愿意，可以从代码中删除），那么这些项目就会掉落：

.col_12 {
    background: none repeat scroll 0 0 #ccc;
    float: left;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    width: 100%;
}
.col_12 .center {
    background: none repeat scroll 0 0 red;
    margin: 0 auto;
    text-align: center;
}
.col_12 p {
    background-color: #f9f9f9;
    margin-bottom: -10px;
}
.col_12 ul {
    float: left;
    list-style: none outside none;
}
.col_12 ul li {
    text-align: left;
}
.col_12 ul li span {
    display: block;
    margin-left: 82px;
}
/*
  Find the img tag(s) after the div(s) whose classes are "center":
*/
.center img {
    float: left;
    max-width: 75%;
}
/*
  Find the ul tag(s) after the div(s) whose classes are "center":
*/
.center ul {
    float: right;
    max-width: 25%;
}

尝试将我的图像和列表对齐在中心位置

1 个答案: