Question

我正试图将左对齐图像的div块居中。这是屏幕截图：

enter image description here

所需的结果是：

enter image description here

我的HTML是这样的：

<div style="margin-left:auto; margin-right:auto;padding:10px 0 0 0;">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
    <img class="medium_thumb_rounded" id="15" src="medium_thumb.jpg">
</div>

当前的CSS：

.medium_thumb_rounded {

  display:inline-block;
  border: 1px solid #B6BCBF;
  height: 80px;
  margin-right: 1px;
  margin-bottom: 5px;
  width: 80px;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
       border-radius: 3px;  
}

我错过了什么？

Answer 1

使用jQuery的解决方案

以下是我将如何解决此问题的原型。

HTML：

<div class="widget-wrap">
    <div class="widget-content">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        ...
    </div>
</div>

和CSS：

.widget-wrap {
    outline: 2px dashed blue;
    text-align: center;
    margin: 0 50px;
}
.widget-content {
    outline: 2px dotted blue;
    display: inline-block;
    vertical-align: bottom;
}
.medium_thumb_rounded {
    display: block;
    float: left;
    width: 100px;
}

和JavaScipt / jQuery：

var $max_w = 600;
var $img_w = 100;

$(window).resize(function () {
contentResizer();
});

// On load, initially, make sure to set the size.
contentResizer();

function contentResizer() {
    var $parent_w = $(".widget-wrap").width();
    if ($parent_w < $max_w) {
        var $set_w = $parent_w;
    } else {
        var $set_w = $max_w;
    }
    var $trimmed_w = Math.floor($set_w / $img_w) * $img_w;
    $(".widget-content").width($trimmed_w);
}

小提琴演示：http://jsfiddle.net/audetwebdesign/jJCak/

如何运作

我定义了一个包含div.widget-wrap的内容text-align: center。 .widget-content是inline-block类型，可以保存图像。由于源代码换行等原因，请使用vertical-align来消除一些额外的空白区域。

在.widget-content内，我将图像浮动到左侧并将宽度设置为100px。您可以根据需要使用边距和填充。

jQuery Action

有两个参数，图像宽度为100px，图像最大宽度为600px，对应6幅图像，再次可以确定最佳效果。

调整窗口大小后，函数contentResizer()会检查.widget-wrap的宽度，并将其与$max_w进行比较。如果窗口收缩得足够，请通过将with向下舍入到下一整个图像数量来计算.widget-content的新宽度。

您还希望确保允许窗口的大小变大（if语句中的替代子句）。

最后，在加载页面时调用contentResizer()一次。

为什么无法单独使用CSS

CSS解析器不会根据子元素的内容确定包含块的宽度（表除外，它使用不同的大小调整算法）。

在此应用程序中，如果您将width设置为固定值并使用margin: 0 auto，则该块将居中。如果您没有设置宽度并使用margin: 0 Xpx，那么您将再次拥有一个左/右边距为Xpx的居中块。

但是，如果您依赖width: auto和margin: 0 auto，则CSS规范不会指定要执行的操作，因此宽度会填充其父容器的宽度。

原因是CSS解析器在一次传递中从左到右，从上到下格式化内容（表除外）。理想情况下，CSS解析器将设置容器宽度，布置图像，然后返回并计算宽度，然后缩小以适应容器宽度，但这不是事情的工作方式。

在表格单元格中使用了缩小拟合算法，在某些情况下，对于溢出的绝对定位元素，这种方法没有帮助，但这对您的应用程序没有帮助。

Answer 2

如果你给你的div一个宽度，那么设置你的余量：0 auto;你应该去。

Answer 3

很容易

您需要再添加一个div，我们称之为parent，然后再将类children添加到您现有的div

div.children {
    width: 80%; //change it for what you want
    text-align: left;
}
div.parent {
    text-align: center;
}

http://jsfiddle.net/tuxH7/5/

Answer 4

我建议使用JavaScript添加第一行中所有项目的宽度。然后将图像周围的包装器设置为该宽度。这样，如果包装器有margin：auto;在它上面，它将居中。

Answer 5

在这里看到太多复杂的答案。这应该有效，或至少回答OP的问题：

    <div id="wrapper">
        <div class="content">
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
            <img src="medium_thumb.jpg" />
        </div>
    </div>

CSS：

    .content{
        margin: 0 auto;
        width: 80%;
    }

    .content img{
        float:left;
        display:block;
        width:25%; /* This controls how many you want per row*/
    }

Fiddle here

Answer 6

只需将以下属性放在css类或样式部分

中

对齐：中心

如何将左对齐图像的div块居中？

6 个答案: