-1
我有兩個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>