对齐中间的元素

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：在这些元素之间有一点空间（就像现在一样）。

但这是结果：

我该如何解决？

（演示）：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;
}

对于空间，只需在您的要素上留下填充（cf代码）。如果你的宽度不够大，它还会变坏