尝试将一个居中的图像块向左对齐 [英] Trying to align a centered div block of images to the left

问题描述

我有多个图片，当网页调整大小应左对齐，但仍保持div块居中。他们目前正在集中：

I have multiple images that when the webpage is resized should be left justified but still keep the div block centered. They are currently all being centered:

请参阅下文：

这是我的HTML和CSS代码：

Here is my HTML and CSS code:

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

任何想法我做错了什么？

Any idea what I'm doing wrong?

推荐答案

为了得到我想要的行为，你的DIV需要一个最大宽度。

To get the behavior I think you're seeking, your DIV needs a max-width.

http://jsfiddle.net/cswbr/

style="text-align:center;"

向您的DIV添加：

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

这篇关于尝试将一个居中的图像块向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！