1

我试图弄清楚如何将位于它们自己的图像居中，将它们居中在容器中。我在 2 列中有 8 张图像，每行 2 张图像左对齐。我需要它们居中对齐。

我在这里找到了一种居中的方法： 在 div 的中心水平对齐多个图像

浮动块级项目会将其推向左侧或右侧。IMG 上的“display:inline-block”。并删除浮动和位置语句。然后是容器 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>

4

2 回答 2

0

由于您的 DIV 不够宽，您最初尝试中的图像很可能被强制放入单个列中。你的图片是 150px 宽 + 2x 3px padding + 2x 5px margin + 2x 1px 边框 = 168px。

很多浏览器目前还不支持box-sizing:border-box，最好还是避开它，否则会得到不一致的结果。

删除box-sizing:border-box336px 宽的容器将使图像居中，或者使用以下 CSS 将图像包装在内部容器中也可以解决问题。

.inner_container{
  width:336px;
  margin-left:auto;
  margin-right:auto;
}

JSFiddle

当然，现在您仍然必须适应旧版本的 IE，但这应该可以实现您在现代浏览器中的目标。

于 2013-01-05T14:53:38.373 回答
0

虽然上面的答案是正确的....我会使用一个额外的内部包装器和 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/

于 2014-09-24T09:26:03.907 回答