如何重置媒体查询中心

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

你可以这样说：

/* added some basic CSS browser reset which is always good to have */ 
 
* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width: 100%;} 
 

 
#icon { 
 
    border: solid; 
 
    border-color: red; 
 
    border-width: 2px; 
 
    max-width: 200px; 
 
} 
 
#about { 
 
    min-height: 100%; 
 
    min-height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; /* added */ 
 
} 
 
#aboutInfo { 
 
    border: solid; 
 
    border-color: red; 
 
    border-width: 2px; 
 
} 
 
@media screen and (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 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>

默认状态下柔性父栈及其子行明智的，但你可以很容易地改变flex-direction属性设置为column的值。