Question

我正在创建本地网页，但是遇到了一些问题-我试图将框居中，但没有任何尝试过的方法。我有2个部分-第一个部分稍微向右对齐，而第二个部分则向左稍微对齐（只粘贴了第一部分的代码）。

我尝试使用margin：auto和许多其他我不记得的东西，因为我尝试解决此问题已有一段时间。

<div class="main-container">
  <div class="services">
    <div class="heading">
      <h2>Services</h2>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
  border-top: 5px solid hsla(134, 97%, 14%);
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  float: left;
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

Answer 1

标题div是div class="services"的子元素，它“循环”出所有子元素。

我稍微调整了标记。将标题移出服务div，并同时删除了float属性。

最后，我将边框改为.main-container类。

这解决了您的问题吗？：）

.main-container {
   border-top: 5px solid hsla(134, 97%, 14%);
}

.services {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 420px;
 
  flex-wrap: wrap;
  }

/* Box titles */

.heading {
  display: inline;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
  color: hsl(134, 97%, 14%);
  top: 20px;
  left: 150px;
}

.box {
  display: block;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  height: 200px;
  width: 190px;
  border: 3px solid hsl(356, 97%, 29%);
  margin: 75px  40px;
  padding: 15px 15px;
  border-radius: 10px;
  color: hsl(134, 97%, 14%);
}

.box h3, .box p {
  text-align: center;
  margin-top: 10px;
}

.service-icon {
  text-align: center;
}

.service-icon i {
  font-size: 30px; line-height: normal;
}

<div class="main-container">
   <div class="heading">
      <h2>Services</h2>
    </div>
  <div class="services">
    
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-expand-arrows-alt"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-smile"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-comments"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="far fa-user"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
    <div class="box">
      <div class="service-icon">
        <i class="fas fa-gift"></i>
      </div>
      <h3>some text</h3>
      <p>some text</p>
    </div>
  </div>
</div>

JSFiddle example

如何使用Flexbox将盒子居中？

1 个答案: