无法在div中放置图像

所以我有一个div，里面有水平对齐的div，在这个例子中只有1.在这个水平div内有3个div，一个对齐左边，一个中间和一个右边。我希望这三个div中的每一个中的图像都是居中的，因此它更具视觉吸引力。无法在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/

来源

2015-02-06 Genome314

给text-align:center;每个DIV + CSS

LIK E：

.firEl{ 
text-align:center; 
}

编辑

如果，文字不想中心则：

.elPara{ 
    text-align:left; 
}

检查更新的代码在这里。 Fiddle

来源

2015-02-06 09:26:00 ketan

我认为OP希望中心的图像。你也把文本居中。 – 2015-02-06 09:43:17

我编辑了我的答案。给p“文本对齐：左”。 – ketan 2015-02-06 09:46:28

-1

display: block; 
margin: auto;

代替

margin:0 auto;

来源

2015-02-06 09:26:34 oxmolol

添加这应该做的伎俩：

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

或者只是居中对齐，如下对方回答说，如果你要保持你的图片内嵌。

来源

2015-02-06 09:26:46

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

#firstRow div{ 
text-align:center; 
}

results

来源

2015-02-06 09:36:45 Joseph

我认为OP要图像居中。你也把文本居中。 – 2015-02-06 09:42:41

我扔在尼克Solloum的答案，并发现该商标仍向底部稍微偏离中心。无论如何，我将所有的图像类组合成一个，因为它们具有相同的值。我通过改变padding-top来解决这个问题：达到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; 
}

来源

2015-02-06 09:45:01

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

来源

2015-02-06 09:47:48

无法在div中放置图像

回答

相关问题