html - 如何在媒体查询中重置居中

Question

我有两个 div 包裹着另一个 div (id="about")。使用全尺寸浏览器，它会水平和垂直居中显示，这正是我想要的。但是，当窗口的大小调整得更小时，我希望这两个 div 堆叠在一起而不是并排。

对于我的尝试，我想基本上重置该包装器(关于)。我的 CSS:

#icon{
    border: solid;
    border-color: red;
    border-width: 2px;

    max-width: 200px;
}
#about{
    min-height: 100%;
    min-height: 100vh;  

    <!-- These two lines horizontally and vertically centers about -->
    <!-- If removed, its responsive and stacks up the way that I want,
         BUT it no longer is centered vertically and sits on top of the page -->
    display: flex;
    align-items: center;
}
#aboutInfo{
    border: solid;
    border-color: red;
    border-width: 2px;  
    padding: 0;
}
@media (max-width: 768px){      
    #icon {
        max-width: 100px;
    }
    <!-- ATTEMPT TO RESET -->
    #about {
        float: none;
        width: 100%;
    }       
}

如何重置居中，以便在调整窗口大小时它堆叠起来，但在较大的浏览器中仍然居中。这是我的 HTML:

<div class="container text-center">
    <div class="row">
        <div id="about">

        <div class="col-sm-4 padding-0">
            <img src="img/html5.png" id="icon">
        </div>


        <div class="col-sm-6 padding-0">
            <div id="aboutInfo">
                <h1>Lorem Ipsum.</h1>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
                  Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. 
                  Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. 
                  Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. 
                  In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor 
                  maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien 
                  a ex porta dictum.
                </p>
            </div>
        </div>

        </div> <!-- end of about -->
    </div> <-- end of row -->
</div>

Answer 1

你可以这样做:

body {margin: 0}

#icon {
  border: 2px solid red;
  max-width: 200px;
}

#about {
  min-height: 100%;
  min-height: 100vh;  
  display: flex;
  align-items: center;
  justify-content: center; /* added */
}

#aboutInfo {
  border: 2px solid red; 
}

@media (max-width: 768px) {      
  #icon {max-width: 100px}
  #about {flex-direction: column} /* added */
}

<div class="container text-center">
  <div class="row">
    <div id="about">
      <div class="col-sm-4 padding-0">
        <img id="icon" src="https://placehold.it/200x150" alt="">
      </div>
      <div class="col-sm-6 padding-0">
        <div id="aboutInfo">
          <h1>Lorem Ipsum.</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
            Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. 
            Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. 
            Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. 
            In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor 
            maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien 
            a ex porta dictum.
          </p>
        </div>
      </div>
    </div> <!-- end of about -->
  </div> <!-- end of row -->
</div>

默认情况下，flex-container 或 parent 按行堆叠 flex-items 或 children，但你可以通过将 flex-direction property 设置为 column 的 value 轻松更改。