2017-11-27 3 views
0

CSSのテキストを中央に配置し、JavaScriptを使用せずに、どれだけ大きなサイズであるかを知らずに左右に拡張することはできますか?テキストセンターがコンテナの外にある

私の試みでは、テキストは常に右側に拡大されます。

.container { 
 
    width: 90px; 
 

 
    border: 1px solid red; 
 
    
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: visible; 
 
}
<div class="container">Hello very long text</div> 
 
    <div class="container">Small text</div>

+1

私はあなたが達成しようとしている正確な動作を理解することは少し難しいですしかし、divの中にテキストを配置すると、常にex divの幅と同じくらい左右にパンが許せます。 – Zvezdas1989

+0

これを実現するには、内部要素が必要だと思います。 – Danield

+0

申し訳ありませんが私の質問が明確でない場合。あなたの答えは、JohannesとVXpに感謝します。 Flexboxは私にとってはよかったようです。 – Charles

答えて

2

あなたはフレキシボックスでそれを行うことができます。

.container { 
 
    display: flex; /* added */ 
 
    justify-content: center; /* horizontal alignment/centering */ 
 
    width: 90px; 
 
    border: 1px solid red; 
 
    /*text-align: center;*/ 
 
    white-space: nowrap; 
 
    overflow: visible; 
 
}
<div class="container">Hello very long text</div> 
 
<div class="container">Small text</div>

-2

あなたはdiv要素に別々にテキストをラップし、そのためにCSSクラスマージンを追加することができます。あなたは何ができるか

<html> 
     <body> 
     <style> 
     .container 
     { 
      width: 90px;  
      border: 1px solid red;  
      text-align: center; 
      white-space: nowrap; 
      overflow: visible; 
     } 
     .textClass 
     { 
      margin-left: -15px; 
     } 
     </style> 
     <div class="container"> 
       <div class="textClass"> 
        Hello very long text 
       </div> 
     </div> 
     <div class="container">Small text</div><a href="/video">video</a> 
    </body> 
    </html> 
3

は、以下のソリューションです、コンテナposition: relativeを作ることでspanを入れて、(位置:絶対など)、それを中心にそのスパンに以下の設定を適用 あなたはする必要がありますコンテナにある程度の高さを与えて、その作業を行います。

.container { 
 
    width: 90px; 
 
    border: 1px solid red; 
 
    white-space: nowrap; 
 
    overflow: visible; 
 
    text-align: center; 
 
    position: relative; 
 
    height: 1.4em; 
 
} 
 

 
.container>span { 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%) 
 
}
<div class="container"><span>Hello very very very long text</span></div> 
 
<div class="container">Small text</div>

関連する問題