我试图弄清楚如何将位于它们自己内部的图像居中放置在容器中。 我在2列中有8张图像,每行剩下2张图像对齐。 我需要它们居中对齐。
我找到了一种居中的方法: 在div的中心水平对齐多个图像
浮动块级项目会将其向左或向右推。 IMG上的“ display:inline-block”。 并删除float和position语句。 然后为容器div使用“ text-align:center”。
但是那样可以将所有图像放入一列。 任何帮助,将不胜感激。
这是我的CSS控制容器和图像:
.container {
width: 452px;
height: 750px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 5px;
font-size: 11px;
}
.item a img {
width: 150px;
height: 160px;
box-sizing: border-box;
float: left;
padding: 3px;
background-color: #FFF;
margin: 5px;
border: 1px solid #cccccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 0.7;
}
这是html:
<div class="container clearfix">
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/01.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/01t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/02.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/02t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div><p>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/03.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/03t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/04.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/04t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/05.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/05t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/07.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/07t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/06.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/06t.JPG" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/10.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/10t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
由于您的DIV不够宽,您最初尝试中的图像很可能被强制放入一列中。 您的图片宽度为150px + 2x 3px填充+ 2x 5px边距+ 2x 1px边框= 168px。
许多浏览器仍然不支持box-sizing:border-box
因此,暂时最好不要使用它,否则您将获得不一致的结果。
删除box-sizing:border-box
并将容器的宽度设为336px将使图像居中,或者使用以下CSS将图像包装在内部容器中也可以解决问题。
.inner_container{
width:336px;
margin-left:auto;
margin-right:auto;
}
当然,现在,您仍然必须容纳旧版本的IE,但这应该可以实现现代浏览器的目标。
虽然上面的答案是正确的。...我将使用其他内部包装器和text-align:center;。 属性,以使整个事物与浏览器兼容。 我不得不反复考虑几次以完成不同的任务……基本上我总是回到相同的技术上:我使用了一个额外的内部包装器,该包装器的作用类似于普通的块元素和text-align:center;。 属性,以使整个事物与浏览器兼容。 我设置或浮动的任何东西都将停留在居中的^。^上,并且我可以调整宽度和填充以使行成两三成三,或者我需要分开多远。
CSS示例:
#container {
width: 100%;
text-align: center;
}
.innerwrap {display:inline-block;}
.innerwrap div{
padding:5px;
margin:5px;
float: left;
}
在您的代码上使用: http : //jsfiddle.net/cwk6nd9c/1/