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

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-direction 属性设置为值 column 。