居中对齐元素

Question

我都，我有这部分代码

HTML:

<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<a href=""><img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" /></a>
                    <div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
                    </div>
</div>
           <div class="feature">
<a href=""><img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" /></a>
                    <div class="feature-content icon-offset">
                                <h4>Kollaboration</h4>
                    </div>
</div>
<div class="feature">
<a href=""><img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" /></a>
                    <div class="feature-content icon-offset">
                                <h4>Archiv</h4>
                    </div>
</div>
<div class="feature">
<a href=""><img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" /></a>
                    <div class="feature-content icon-offset">
                                <h4>Wertsachen</h4>
                    </div>
</div>
</div>
</div>

CSS:

.feature { margin-right: 2rem; }

我需要的是 1: 将 class="feature" 元素居中 2：在这些元素之间有一点 space（就像现在一样）。

但这是结果：

我该如何解决？

（演示）：https://jsfiddle.net/kf3u042k/

Answer 1

你可以改变css这样的东西

.modular .features .feature {
  display: block;
  float: left;
  margin-bottom: 1rem;
  margin-top: 2rem;
  vertical-align: top;
  width: 24%;
}

.feature {
  margin-right: 15px;
}

Answer 2

尝试将这段代码添加到您的样式表中。 .feature{ margin-left:auto; margin-right:auto; max-width:900px; }

Answer 3

您必须固定宽度，然后将边距设置为自动。它会是这样的：

.feature{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    padding-left: x px;
}

对于 space 只需在您的功能上添加一个 padding-left（参见代码）。如果你的宽度不够大，它仍然会变坏

居中对齐元素

Align elements in the middle

html

css

alignment