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

Question

我试图调整我的.homepage网站功能DIV，使它们显示在其包装qazxsw poi的中心。

我试过#homepagewebsitefeatures和margin-left: auto;，但没有太多运气。

这是我的代码：

margin-right: auto;

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

Answer 1

尝试将

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

更改为#homepagewebsitefeatures并使用以下CSS属性来居中内容：

display: flex

Answer 2

如果你的

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

元素是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

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