Question

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

我试过：保证金：0自动;但它不起作用，任何想法为什么这不起作用以及如何让它工作？

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

如果你想让你的图像保持内联，或者只是将中心对准下面说明的另一个答案。

Answer 2

在每个div css中提供text-align:center;

像：

.firEl{
 text-align:center;
}

修改

如果，文字不想要中心那么：

.elPara{ text-align:left; }

在此处查看更新的代码。 Fiddle

Answer 3

为包含徽标的每个div设置 text-align：center 。

#firstRow div{
text-align:center;
}

results

Answer 4

我投入了Nick Solloum的回答，发现这些徽标仍然偏向中心。我将所有图像类组合成一个，因为它们具有相同的值。我通过更改填充顶部来修复此问题：达到4％并且发现它对我来说看起来更干净。这是经过调整的CSS。我希望这有帮助

HTML

<html>
<body>
<link rel="stylesheet" type="text/css" href='so.css'>
</body>
<div id="main">
<div id="firstRow">
    <div class="El">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p>BlahBlahBlah</p>
    </div>
    <div class="El">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p class="elPara">BlahBlahBlahBlahBlah</p>
    </div>
    <div class="El">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
        <p class="elPara">BlahBlahBlahBlahBlah</p>
    </div>
</div>



</html>

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

.El{
    background-color: #FFF;
    min-width: 10px;
    width: 100px;
    height: 140px;
    width: 30%;
    margin: 10px;
    float:left;
    padding-top: 4%;
}
img {
    display: block;
    margin: 0 auto;
}

Answer 5

方法1

将显示块添加到.logo。点击此处：http://jsfiddle.net/2u695mdu/4/

<强> CSS

.logo{
    width: 100px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: 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;
}

<强> 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>
</div>

只有图像居中。

方法2

在每张图片前添加<div align="center">，如下所示：http://jsfiddle.net/2u695mdu/7/

方法3

检查@ketan回答。

方法4

因为你设置了图像宽度，你可以使用相对于图像的位置http://jsfiddle.net/2u695mdu/8/

.logo{
    width: 100px;
    height: 100px;
    position: relative;
    left: 50%;
    margin-left: -50px;
}

Answer 6

display: block;
margin: auto;

而不是

margin:0 auto;

无法将图像居中于div

6 个答案: