Wie 2 Klassen innerhalb div vertikal ausgerichtet werden

Question

Ich habe einen Wrapper mit einigen Info div's innen. Alle Dinge sind gut, aber ich kann es nicht vertikal gerechtfertigt machen.

Wie zu rechtfertigen, vertikal ausgerichtet und in der Mitte positioniert beide .title &. Text Klassen?

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

Verwenden Sie :before, um die vertikale Ausrichtung zu unterstützen, und entfernen Sie die 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

aktualisieren 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

Hinweise: Ihre height:50%;line-height: 50%; entfernen und hinzufügen padding