Question

我正在一个网站上，我想在内容区域的中心对齐4个圆圈。可以在invisionbilling.com/stackoverflow上找到该示例。我现在有可以完成此工作的东西，但是我知道在不同的窗口大小，不同的图片大小等情况下会出现问题。如何设置div容器的高度以自动环绕4个圆圈/图像？有没有一种方法可以使用margin-left和margin-right自动将其居中？我为所有这些尝试了“自动”功能，但没有完成任务。谢谢！

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

Answer 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>

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

1 个答案: