Wie zentriert man Text in einem kleineren div?

Question

Ist es möglich, den Text horizontal in einem kleineren div zu zentrieren? Die Zeichenlänge ändert sich mit der Zeit. Es ist also keine Option, einen Offset für jeden Artikel zu erstellen.

Siehe Beispiel:

.container { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
a { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 50px; 
 
    background: red; 
 
    white-space: nowrap; 
 
    float: left; 
 
} 
 
span { 
 
    position: absolute; 
 
    top: 0px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <a href="" class="box-1"> 
 
    <span>Lorem</span> 
 
    </a> 
 
    <a href="" class="box-2"> 
 
    <span>Lorem ipsum dolor sit amet</span> 
 
    </a> 
 
    <a href="" class="box-3"> 
 
    <span>Lorem ipsum dolor sit</span> 
 
    </a> 
 
</div>

Answer 1

Sie können left: 50%; auf dem Textelement verwenden, das in der Lage führt, wo linker Rand in der Mitte des umgebenden Elements ist. Um dies zu korrigieren und die Mitte des Elements in der Mitte des umgebenden Bereichs zu platzieren, müssen Sie die Hälfte des Textes wieder nach links transformieren. Sie können dies mit transform: translateX(-50%); erreichen. Außerdem ist es wichtig, dass das umgebende Element position: relative; hat.

Ihr Beispiel würde wie folgt aussehen:

.container { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 

 
a { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 50px; 
 
    background: red; 
 
    white-space: nowrap; 
 
    float: left; 
 
} 
 
    
 
    span { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <a href="" class="box-1"> 
 
     <span>Lorem</span> 
 
    </a> 
 
    <a href="" class="box-2"> 
 
     <span>Lorem ipsum dolor sit amet</span> 
 
    </a> 
 
    <a href="" class="box-3"> 
 
     <span>Lorem ipsum dolor sit</span> 
 
    </a> 
 
    </div>

Answer 2

Verwenden Sie die Mitte-Tag.

Mit Ihrem Beispiel können Sie entweder die zentralen Tags innerhalb des div setzen oder das div zentrieren.

<center> 
 
    <div class="container"> 
 
    <a href="" class="box-1"> 
 
     <span>Lorem</span> 
 
    </a> 
 
    <a href="" class="box-2"> 
 
     <span>Lorem ipsum dolor sit amet</span> 
 
    </a> 
 
    <a href="" class="box-3"> 
 
     <span>Lorem ipsum dolor sit</span> 
 
    </a> 
 
    </div> 
 
</center>