Question

我的一个div容器出现了另一个问题。我尝试了各种方法来解决它，但无法看到问题，所以这就是我再次在这里发布的原因。

我有一个大的div容器里面还有另外3个div，而且我找不到一种方法可以将这个div放在中心...

希望我正确地粘贴了html和css代码，当我必须为每一行点击空间时会让人感到困惑lol

<div class="section3 center">

<div class="section3Container center">

    <div class="person" style="float:left">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/nicholas.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/rebeca.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
        <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
        </blockquote>
        <img src="images/gloria.png" width="150px">
        <h4>Placeholder_Name</h4>
    </div>



   </div>
</div>

 ----CSS----
.section3 {
  width:50%;
  height:500px;
  background-color:#adaba7;
}

.section3Container {
  margin-top:50px;  
}

.person {
  width:30%;
  float:left;
}

.person img {
  display:table;
  margin:0 auto;
  margin-bottom:30px;
 }

.person h4 {
  text-align:center;
}

blockquote{
  text-align:center;
  font-size:15px;
  font-style:italic;
  color: #555555;
  padding:17px 15px;
  border-left:8px solid #b19530; 
  position: relative;
  background:#e2e1dc;
  border-radius:50px;
  margin-bottom:20px;

}

blockquote::before{
  content: "\201C";
  color:#b19530;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

And this is the picture guys.Thanks!

Answer 1

更新了我的答案，因为有额外的信息 - 请参阅评论讨论和相关变化。

我使用Flex框来均匀地展示推荐书。

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

.center {
  display: table;
  margin: auto;
}

.section3 {
  width: 50%;
  background-color: #adaba7;
}

.section3 p {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  font-weight: bold;
}

.section3Container {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.person {
  width: 30%;
  margin-bottom: 30px;
}

.person img {
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
}

.person h4 {
  text-align: center;
  color: white;
  font-size: 18px;
}

blockquote {
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #555555;
  padding: 17px 15px;
  border-left: 8px solid #b19530;
  position: relative;
  background: #e2e1dc;
  border-radius: 50px;
  margin-bottom: 20px;
}

blockquote::before {
  content: "\201C";
  color: #b19530;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after {
  content: '';
}

<div class="section3 center">
  <p>Testimonials</p>

  <div class="section3Container">

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/nicholas.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/rebeca.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

    <div class="person">
      <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </blockquote>
      <img src="images/gloria.png" width="150px">
      <h4>Placeholder_Name</h4>
    </div>

  </div>
</div>

[HTML] [CSS]包含另外3个div的Div不会居中

1 个答案: