Zentrieren Text um einen Punkt

Question

Bedenken Sie:

<div id="point"> 
    <div class="caption">Caption here</div> 
</div> 

Position auf #point gesetzt:

#point{ 
    top: 50px; 
    left: 50px; 
} 

Jetzt möchte ich den Text horizontal um die es zentriert werden. Ich versuchte, die div Null Breite

#point > .caption{ 
    width: 0px; 
    text-align: center; 
} 

macht aber anscheinend funktioniert das nicht. Wie zentriere ich den Text? Es muss nicht zwei div s haben. Es ist nur, dass ich zwei div s versuchte, damit es funktioniert.

Answer 1

Mit transform können wir Text horizontal (und/oder vertikal) zentrieren, was normalerweise seine obere linke Ecke ist (der Punkt, über den Sie sprechen).

Der rote Punkt (mit der Klasse block) wird hinzugefügt, um den Punkt zu zeigen, auf den wir uns konzentrieren.

.caption { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.block { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 5px; 
 
    height: 5px; 
 
    background-color: red; 
 
    transform: translate(-50%, -50%); 
 
}

<span class="caption">Caption here</span> 
 
<div class="block"></div>

Version, die anstelle von transform zwei Elemente und relative Positionierung verwendet: für meine Sprache

.caption { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
    left: -50%; 
 
    top: -0.5em; 
 
} 
 

 
.block { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    width: 5px; 
 
    height: 5px; 
 
    background-color: red; 
 
    transform: translate(-50%, -50%); 
 
}

<span class="caption"><span class="inner">Caption here</span></span> 
 
<div class="block"></div>

Answer 2

Entschuldigen Sie mich, da es nicht ausgezeichnet ist. Das Problem mit Ihnen in diesem Code

 #point > .caption{ 
    width: 0px; 
    text-align: center; 
} 

ist das Breitenelement. Weil du falschen Wert angegeben hast. Löschen Sie das Attribut width oder ändern Sie den Wert in auto. Ich hoffe, dass ich verstehe, was ich sage. Viel Glück!