html - 尝试将我的图像和列表居中对齐

Question

我试图将我的图像和我的列表居中对齐，但它不适用于 margin:0 auto;。

而且我还想在左边显示我的图片，在右边显示我的列表，但情况恰恰相反。

有人看到我哪里做错了吗？

我的例子: http://jsfiddle.net/3yqnj7s6/2/

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%;
}