div内で2つのクラスを垂直に整列する方法

Question

私はいくつかの情報divを含むラッパーを持っています。すべてがうまくいっていますが、私はそれを垂直に正当化することはできません。

縦に整列して中央に配置する方法.title & .textクラス？

body { 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
} 
 
#wrapper { 
 
    position: absolute; 
 
    width:96.4%; 
 
    height:80%; 
 
    border:1px solid #1f1e1e; 
 
    padding:10px; 
 
} 
 
.info{ 
 
    position: relative; 
 
    width:100%; 
 
    height:32%; 
 
    background-color:#1b1f1e; 
 
    border-radius:6px; 
 
    color:#fff; 
 
    font-size:18px; 
 
    margin-bottom:6px; 
 
} 
 
.title{ 
 
    background-color:#dc6210; 
 
    text-align:center; 
 
    height:50%; 
 
    line-height:50%; 
 
    border-top-left-radius:6px; 
 
    border-top-right-radius:6px; 
 
} 
 
.text{ 
 
    text-align:center; 
 
    height:50%; 
 
    line-height: 50%; 
 
}

<div id="wrapper"> 
 
    <div class="info"> 
 
    <div class="title">Title</div> 
 
    <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div>  
 
    </div> 
 
    <div class="info"> 
 
    <div class="title">Title</div> 
 
    <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div> 
 
    </div> 
 
    <div class="info"> 
 
    <div class="title">Title</div> 
 
    <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div> 
 
    </div> 
 
</div>

Answer 1

:beforeを使用して垂直方向の位置を調整し、line-height: 50%;を削除します。

.info > div:before{ 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    width: 1px; 
} 

body {margin-left: 0px;margin-top: 0px; margin-right: 0px; margin-bottom: 0px;} 
 
#wrapper {width:96.4%;height:80%; border:1px solid #1f1e1e; padding:10px;} 
 
.info{width:100%;height:32%;background-color:#1b1f1e; border-radius:6px;color:#fff;font-size:18px;margin-bottom:6px;} 
 
.title{background-color:#dc6210;text-align:center;height:50%;border-top-left-radius:6px;border-top-right-radius:6px;} 
 
.text{text-align:center;height:50%;} 
 

 
#wrapper{ 
 
    min-height: 400px; 
 
} 
 
html, body{ 
 
    height: 100%; 
 
} 
 
p{ 
 
    margin: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 98%; 
 
} 
 
.info > div:before{ 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    width: 1px; 
 
}

<div id="wrapper"> 
 
    <div class="info"> 
 
<div class="title">Title</div> 
 
<div class="text"> 
 
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> 
 
</div>  
 
    </div> 
 
    <div class="info"> 
 
<div class="title">Title</div> 
 
<div class="text"> 
 
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> 
 
</div> 
 
    </div> 
 
    <div class="info"> 
 
<div class="title">Title</div> 
 
<div class="text"> 
 
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> 
 
</div> 
 
    </div> 
 
</div>

https://jsfiddle.net/afelixj/3rj01sp2/1/

Answer 2

更新のCss

.title { 
    background-color: #dc6210; 
    text-align: center; 
    padding:10px; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 

} 

.text { 
    text-align: center; 
    padding:16px; 
} 

Live Demo

注：あなたheight:50%;line-height: 50%;を削除し、パディング

を追加します。 0