尝试将居中的div图像块对齐到左侧

Question

我有多个图像，当网页调整大小时应该左对齐，但仍然保持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;  
}

知道我做错了吗？

Answer 1

你的问题就在这一行：

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

删除中心文字对齐。

Answer 2

更改text-align:center;

的text-align:left;

Answer 3

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

margin:auto;

它会使div居中，但对div内的内部没有任何影响。将此与其他将text-align:center更改为text-align:left

的答案结合使用

Answer 4

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

http://jsfiddle.net/cswbr/

style="text-align:center;"

到你的DIV，添加：

margin:0 auto; 
max-width:###px;