-3

我有多个图像，当调整网页大小时应该左对齐，但仍然保持 div 块居中。他们目前都被居中：

见下文：

在此处输入图像描述

这是我的 HTML 和 CSS 代码：

<div class="widget-content" style="text-align:center;">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
</div>

CSS：

.widget-content {
  padding: 12px 15px;
  border-bottom: 1px solid #cdcdcd;
}

.medium_thumb_rounded {

  border: 1px solid #B6BCBF;
  /*float: left;*/
  height: 80px;
  width: 80px;
  margin-right: 1px;
  margin-bottom: 5px;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
       border-radius: 3px;  
}

知道我做错了什么吗？

4

4 回答 4

0

为了获得我认为您正在寻求的行为，您的 DIV 需要一个最大宽度。

http://jsfiddle.net/cswbr/

style="text-align:center;"

在您的 DIV 中，添加：

margin:0 auto; 
max-width:###px;
于 2013-05-10T18:20:38.477 回答
0

你的问题是这一行：

<div class="widget-content" style="text-align:center;">

删除中心文本对齐。

于 2013-05-10T17:34:40.713 回答
0

更改text-align:center;为text-align:left;

于 2013-05-10T17:34:42.420 回答
0

要保持 div 居中，请尝试将其添加到.widget-content：

margin:auto;

它将使 div 居中，但对 div内部的内容没有影响。将此与其他更改text-align:center为的答案结合使用text-align:left

于 2013-05-10T17:36:12.407 回答