试图将居中的 div 图像块向左对齐答案

【问题标题】：Trying to align a centered div block of images to the left试图将居中的 div 图像块向左对齐
【发布时间】：2023-04-09 10:12:01
【问题描述】：

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

知道我做错了什么吗？

【问题讨论】：

你在哪里告诉它左对齐？
想要的结果是什么？
.widget-content { text-align:left; }
您说 div 应该居中，但 div 是 100% 宽度（默认情况下）。将其容器的整个宽度居中是什么意思？
@James Montagne 我基本上是想保持左右边距相等

标签： html css

【解决方案1】：

你的问题是这一行：

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

去除居中的文字对齐。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

margin:auto;

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

【讨论】：

【解决方案4】：

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

http://jsfiddle.net/cswbr/

style="text-align:center;"

在您的 DIV 中，添加：

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

【讨论】：