我需要居中多个图像，每个都有自己的div标签，在容器内

我想弄清楚如何将图像放置在它们自己的中心，将它们置于容器内。我有2列8个图像，每行左对齐2个图像。我需要他们居中对齐。我需要居中多个图像，每个都有自己的div标签，在容器内

我找到了一种方法来这儿中心： Aligning multiple images horizontally in the center of a div

浮动块级别的项目将它推到左边或右边。 IMG上的“display：inline-block”。并删除浮动和位置报表。然后为容器div“text-align：center”。

但是，这种方式把所有的图像放在一个单一的列。任何帮助，将不胜感激。

这里是我的CSS controling容器和图像：

.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>

来源

2013-01-05 Skeeter

我觉得关键是设计的图像，你希望他们在一个集装箱的方式，然后中心该容器。您可能会将图像置于其容器内，然后将该容器居中，这似乎是两次。 – DOK

在原始尝试这些图像是最有可能被迫进入在一个列中，因为你的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; 
}

JSFiddle

现在当然，你仍然必须适应旧版本的IE，但这应该实现自己的目标的现代浏览器。

来源

2013-01-05 14:53:38 PassKit

你是炸弹！对此，我真的非常感激。在ie8和9中工作，这就是我真正关心的。那么FF和Chrome，但通常如果它在ie中工作，也可以在这些工作，虽然相反不一定是真的。 – Skeeter

仅供参考我在CSS中留下了框尺寸：边框。它似乎没有造成任何问题。我确实接受了答案选中标记。再次感谢。 – Skeeter

保留'box-sizing：border-box'会导致您的内容在webkit浏览器（以及任何其他支持该属性的浏览器）中倾斜16px，因为它会将每个img宽度减少到142像素，以便包含填充和边框是150px。 – PassKit

虽然上面的答案是正确的....我会使用一个额外的内部包装和文本对齐：中心;财产，使整个事情跨浏览器兼容。我必须为不同的任务找出这个问题几次...基本上我总是回到相同的技术：我使用一个额外的内部包装，像一个正常的块元素和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/

来源

2014-09-24 09:26:03 BMay

我需要居中多个图像，每个都有自己的div标签，在容器内

回答

相关问题