在图像和中心周围添加 div 容器答案

【问题标题】：Add div container around images and center在图像和中心周围添加 div 容器
【发布时间】：2018-08-22 19:19:34
【问题描述】：

我正在开发一个网站，我想在内容区域的中心对齐 4 个圆圈。该示例可以在 invisionbilling.com/stackoverflow 上找到。我现在有一些东西可以完成这项工作，但我知道会有不同的窗口大小、不同的图片大小等问题。如何设置 div 容器的高度以自动环绕 4 个圆圈/图像？有没有办法使用左边距和右边距自动居中？我为所有这些都尝试了“自动”，但它没有完成这项工作。谢谢！

HTML

<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits- 
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150" 
class="alignnone size-medium wp-image-358" />
</div>

<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits- 
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150" 
class="alignnone size-medium wp-image-363" />
</div>

<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits- 
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150" 
class="alignnone size-medium wp-image-364" />
</div>

<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits- 
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150" 
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>

CSS

.circles {
    display: block !important;
    float: left !important;
    margin: 10px !important;
}

.wrapper {
    height: 175px;
    width: 100%;
    margin-left: 225px;
 }

【问题讨论】：

如果您的项目能够灵活地避免重新发明轮子，请获取 Bootstrap 4。您只需利用它们的实用程序和组件即可管理大部分高度环绕问题。

标签： html css

【解决方案1】：

尝试使用 flexbox 而不是浮动，并且永远不要使用 !important：

<!DOCTYPE html>
<html>
<head>
    <style>
        .circles {
            margin: 10px;
        }

        .wrapper {
            height: 175px;
            width: 100%;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="circles">
        <img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150" 
        class="alignnone size-medium wp-image-358" />
        </div>

        <div class="circles">
        <img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150" 
        class="alignnone size-medium wp-image-363" />
        </div>

        <div class="circles">
        <img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150" 
        class="alignnone size-medium wp-image-364" />
        </div>

        <div class="circles">
        <img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150" 
        height="150" class="alignnone size-medium wp-image-361" />
        </div>
        </div>
</body>
</html>

【讨论】：

感谢奥斯曼！那个 flexbox 似乎在做这项工作。我还删除了“重要”，我会牢记您的建议。