html - 无法在div中居中图像

Question

所以我有一个 div，里面有水平对齐的 div，在这个例子中只有 1 个。在这个水平 div 中有 3 个 div，一个左对齐，一个中间对齐，一个右对齐。我希望这 3 个 div 中的每一个中的图像都居中，这样它在视觉上更具吸引力。

我试过:margin: 0 auto;但它不起作用，有什么想法为什么它不起作用以及如何让它起作用吗？

HTML

<div id="main">
<div id="firstRow">
    <div class="firEl">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p>BlahBlahBlah</p>
    </div>
    <div class="secEl">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p class="elPara">BlahBlahBlahBlahBlah</p>
    </div>
    <div class="thirEl">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p class="elPara">BlahBlahBlahBlahBlah</p>
    </div>
</div>

CSS

    .logo{
    width: 100px;
    height: 100px;
    margin:0 auto;
}
#main{
    width: 650px;
    height:650px;
    margin: 0 0 1em 0;
    overflow: auto;
    min-width: 650px;
    width: 50%;
    margin: 0 auto;
    background-color:#fff;
}
#firstRow{
    width:650px;
    min-width:650px;
    width: 50%;
    margin: 0 auto;
    background-color:#CCC;
    overflow:hidden;
}
.firEl{
    background-color: #FFF;
    min-width: 10px;
    height: 140px;
    width: 100px;
    width: 30%;
    float:left;
    margin: 10px;
}
.secEl{
    background-color: #FFF;
    min-width: 10px;
    height: 140px;
    width: 100px;
    width: 30%;
    margin: 10px;
    float:left;
}
.thirEl{
    background-color: #FFF;
    min-width: 10px;
    width: 100px;
    height: 140px;
    width: 30%;
    margin: 10px;
    float:left;
}

http://jsfiddle.net/genome314/2u695mdu/

Answer 1

添加这个应该可以解决问题:

img {
    display: block;
    margin: 0 auto;
}

或者，如果您想让图像保持内联，则只需按照下面所述的其他答案居中对齐即可。