小さなdivにテキストをどのように配置するのですか？

Question

テキストをより小さなサイズのdivに水平に配置することはできますか？文字の長さは時間とともに変化します。したがって、各項目のオフセットを設定するオプションではありません。左側のエッジが周囲の要素の中心になる位置になるテキスト要素にleft: 50%;を使用することができ

.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

：

は、例を参照してください。これを修正するには、要素の中央を周囲のdivの中央に置くには、テキストの半分を左に戻す必要があります。これはtransform: translateX(-50%);で実現できます。さらに、周囲の要素はposition: relative;であることが重要です。

.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

センタータグを使用します。

あなたの例では、次のようになります。

あなたの例では、centerタグをdivの内側に配置するか、divの中央に配置することができます。

<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>