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

Question

我正在尝试对齐我的 .homepagewebsitefeatures DIV，以便它们显示在其包装器的中心 #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;
}

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

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

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

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

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

CSS Put all floated elements in middle of main wrapper DIV

html

css

wrapper