1

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

在此处输入图像描述

期望的结果是这样的：

在此处输入图像描述

我的 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;  
}

我错过了什么？

4

6 回答 6

2

使用 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，我将图像向左浮动并将宽度设置为 100 像素。您可以根据需要使用边距和填充。

jQuery 动作

有两个参数，100px的图片宽度和600px的图片最大宽度对应6张图片，你可以再次判断什么是最好的。

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

您还想确保您允许窗口变大的情况（语句中的备用子句if）。

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

为什么这不能单独使用 CSS 完成

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

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

但是，如果你依赖width: autoand margin: 0 auto，CSS 规范并没有指定要做什么，所以宽度会填满其父容器的宽度。

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

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

于 2013-05-10T20:32:06.770 回答
1

如果你给你的 div 一个宽度，那么设置你的 margin: 0 auto; 你应该准备好了。

于 2013-05-10T19:43:13.997 回答
1

这很简单

您需要再添加一个 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/

于 2013-05-10T21:14:23.417 回答
0

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

于 2013-05-10T20:37:16.620 回答
0

在这里看到太多复杂的答案。这应该有效，或者至少回答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*/
    }

在这里提琴

于 2013-05-10T21:54:24.083 回答
-2

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

居中对齐

于 2013-05-10T19:27:19.697 回答