保持分區內的P元素

Question

我想讓此分區響應並將文本保持在整個時間的中心位置。截至目前，在手機上看起來很好，因爲我向它添加了媒體查詢，但在桌面上，我的.info-p-div中的p元素進入了下面的div，看起來很糟糕。這些div在頁面上並排顯示。我將發佈我的HTML和CSS代碼，以便查看我的意思。

HTML

<div class="info"> 
<div class="info-img-div"> 
<img src="images/owner.jpg" /> 
<p><font color="#F5F5F5">Text here</font></p> 
</div> 
<div class="info-p-div"> 
<p><font color="#F5F5F5">Text here</font></p> 
</div> 
</div> 
<div class="parallax-3"></div> 

CSS

.info { 
    text-align: center; 
    min-height: 250px; 
    width: 100%; 
    background-color: #000; 
} 

.info-img-div { 
    position: left; 
    width: 35%; 
    border-right-style: solid; 
    border-color: #F5F5F5; 
} 

.info-img-div img { 
    border-radius: 50%; 
    height: 25%; 
    width: 25%; 
    min-height: 100px; 
    min-width: 100px; 
    margin-top: 20px; 
} 

.info-p-div { 
    height: 25%; 
    width: 50%; 
    max-width: 65%; 
    text-align: center; 
    position: relative; 
    float: right; 
    font-size: 12px; 
    word-wrap: break-word; 
    vertical-align: middle; 
} 

.parallax-3 { 
    background-image: url("images/background3.jpg"); 
    height: 400px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

@media only screen and (max-width: 600px) { 
    .info { 
     text-align: center; 
     float: none; 
     height: 50%; 
    } 
    .info-img-div { 
     float: none; 
     border-right-style: none; 
     position: relative; 
     width: 100%; 
    } 
    .info-p-div { 
     float: none; 
     text-align: center; 
     width: 100%; 
     max-width: 100%; 
    } 
} 

Answer 1

我認爲你正在尋找下面的解決方案。

我發佈了一個工作示例。

.box { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 300px; 
 
    background: tomato; 
 
} 
 

 
.box p { 
 
    flex: 1 0 0; 
 
    text-align: center; 
 
} 
 

 
@media screen and (max-width:600px) { 
 
    .box { 
 
    flex-direction: column; 
 
    } 
 
    .box p { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 
}

<div class="box"> 
 
    <p>One</p> 
 
    <p>Two</p> 
 
</div>