Question

我有两个div围绕另一个div（id =＆＃34; about＆＃34;）。使用全尺寸浏览器，它显示水平和垂直居中，这是我想要的。但是，当窗口调整得更小时，我希望两个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

你可以这样做：

＆＃13;

-Dhttp.nonProxyHosts=dummy.snafu.com

＆＃13;

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 */
}

＆＃13;

默认情况下 flex-container 或 parent 按行排列 flex-items 或 children ，但是你可以将<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>  </div>  </div> 属性设置为flex-direction的值，从而轻松更改。

如何重置媒体查询中心

1 个答案: