Einzeiliger Text nicht mit Mittelpunkt von div ausgerichtet

Question

Bei divs mit mehrzeiligen Titeln ist der Text perfekt auf die Mitte ausgerichtet. Bei einzeiligen Titeln ist dies jedoch nicht der Fall (selbst wenn Textausrichtung auf Mitte eingestellt ist). Der Text richtet sich am linken Rand des übergeordneten Bereichs aus. Scheint absolut trivial, hat es aber nicht geschafft, es richtig zu machen.

span.text-content { 
 
    background: rgba(255,255,255,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    opacity:0; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    position:absolute; 
 
    top: 45%; 
 
}

<span class="text-content"><span>Post Title</span></span>

Answer 1

Hier ist das Update Ihren Code (i die Hintergrundfarbe und die Opazität verändert, damit ich es sehen konnte).

Die wichtigsten Änderungen waren Elternanzeige: Tabelle und um dem Kind eine Breite von 100% zu geben, so dass Ihre Textausrichtung funktionieren würde.

span.text-content { 
 
    background-color: white; 
 
    color: white; 
 
    cursor: pointer; 
 
    display: table; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
    position:absolute; 
 
    top: 45%; 
 
}

<span class="text-content"><span>Post Title</span></span>

Answer 2

Weave:http://kodeweave.sourceforge.net/editor/#fe0c9da444a8df390c6242afa00f0bb3

Es ist eine einfache Lösung!

Bei Verwendung von display table-cell muss das übergeordnete Element display table sein.

HINWEIS: Standardmäßig sind die Bereichselemente display inline.

Um Ihren Text zu machen horizontal zentriert Sie text-align center haben müssen (in diesem Fall auf die Eltern von table-cell.

Auch in diesem Fall, dass Sie (oder Top-Position nicht brauchen) zu table-cell angewendet, da vertical-align middle bereits mit zentriert Ihren Text vertikal auf dem table-cell

Zusätzlich Ihre span.text-content ist überqualifiziert .text-content gerade stattdessen

BTW:.. ich Opazität aufentfernt, damit ich den Text sehen konnte.

.text-content { 
 
    cursor: pointer; 
 
    display: table; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.text-content span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #000; 
 
    font-weight: 900; 
 
    text-transform: uppercase; 
 
}

<span class="text-content"> 
 
    <span>Post Title</span> 
 
</span>