CSS将所有浮动元素放在主包装器DIV的中间

Question

我正在尝试调整我的.homepagewebsitefeatures DIV，以便它们显示在其包装器#homepagewebsitefeatures的中心。

我尝试了margin-left: auto;和margin-right: auto;，但没有太多运气。

这是我的代码：

＆＃13;

＆＃13;

.homepagewebsitefeaturescontent {
  float: left;
  margin-left: 15px;
  width: auto;
  font-size: 20px;
}

.homepagewebsitefeaturesimage {
  float: left;
  width: auto;
  display: flex;
}

.homepagewebsitefeatures {
  display: flex;
  align-items: center;
}

#homepagewebsitefeatures {
  background-color: rgba(242, 242, 242, 0.7);
  padding: 35px;
  margin-top: 45px;
  clear: both;
  overflow: auto;
}

.homepagewebsitefeatures {
  float: left;
  width: auto;
  clear: none;
  margin-right: 5%;
}

.homepagewebsitefeatureswrap {
  overflow: auto;
}

＆＃13;

<div id="homepagewebsitefeatures">
  <div class="margin homepagewebsitefeatureswrap">
    <div class="homepagewebsitefeatures">
      <div class="homepagewebsitefeaturesimage">
        <img src="/wp-content/uploads/2016/04/tech-support.png" alt="Website Technical Support">
      </div>
      <div class="homepagewebsitefeaturescontent">
        Technical Support
      </div>
    </div>
    <div class="homepagewebsitefeatures">
      <div class="homepagewebsitefeaturesimage">
        <img src="/wp-content/uploads/2016/04/edit-website.png" alt="Edit website">
      </div>
      <div class="homepagewebsitefeaturescontent">
        Edit your website
      </div>
    </div>
    <div class="homepagewebsitefeatures">
      <div class="homepagewebsitefeaturesimage">
        <img src="/wp-content/uploads/2016/04/globe-domain-hosting.png" alt="Globe Hosting & UK Domain Name">
      </div>
      <div class="homepagewebsitefeaturescontent">
        UK domain & hosting
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将#homepagewebsitefeatures更改为display: flex并使用以下CSS属性来定位内容：

align-items: center;
justify-content: center;

Answer 2

如果您的homepagewebsitefeatures元素为floated。为了使所有浮动元素居中（水平），您将要创建其包装器，homepagewebsitefeatureswrap具有自动左右边距（和display: inline-block）和让他们的父容器homepagewebsitefeatures拥有text-align: center。像这样：

# homepagewebsitefeatures {
    text-align: center;
}

.homepagewebsitefeatureswrap {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

<强> FIDDLE DEMO

＆＃13;

＆＃13;

.wrap {
  background: lightblue;
  text-align: center;
}

.container {
  display: inline-block;
  background: grey;
  margin: 0 auto;
  
}

.container::before,
.container::after {
	content: '';
    display: table;
}

.container::after {
	clear: both;
}

.float {
  padding: 10px;
  float: left;
}

.float > span {
	background: red;
}

.container {
  display: inline-block;
}

＆＃13;

<div class="wrap">
  <div class="container">
    <div class="float"><span>float</span></div>
    <div class="float"><span>float</span></div>
    <div class="float"><span>float</span></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;