左寄せされたテキストブロックを視覚的に中心にします。

Question

私は、幅がコンテナのパーセンテージであるタイルのグリッドを持っています。各タイルには、アイコンとタイトルが含まれ、テキストはアイコンに対して左寄せされています。

アイコンとテキストのコレクションをそのタイルの中央に配置したいと思います。問題は、テキストが折り返すのに十分な長さになると、テキストを含むdivはコンテナの残りの幅全体であると主張することです。

tl：dr、赤い丸で囲まれたスペースがアイコンとテキストの両側に広がり、「教育」タイルが検索されます。

一部のタイルは、次のようになります。JSのフィドルは、それが明確になり

ul.grid { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.tile { 
    display: block; 
    width: 150px; /* this is a percentage of the container width in real life */ 
    height: 80px; 
    background-color: rgb(192, 230, 245); 
    margin: 5px; 
} 

.container { 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

/* this is an icon, I just don't feel like importing font awesome here */ 
i { 
    margin-right: 5px; 
} 

： https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

Answer 1

これは少しあるよう

CSSで

<ul class="grid"> 
    <li class="tile"> 
    <div class="container"> 
     <i>i</i> 
     <div class="title"> 
     Education 
     </div> 
    </div> 
    </li> 
    <li class="tile"> 
    <div class="container"> 
     <i>i</i> 
     <div class="title"> 
     title containnnng longish words 
     </div> 
    </div> 
</ul> 

迅速かつ汚れた解決策しかし、それは仕事をし、それを編集してそこからあなたが望むように働くことができます。

基本的には、コンテナがtext-align:center;になり、アイコンがwidth:5px;になり、コンテナの新しい子がdivという名前のコンテンツになります。最後に、タイトルクラスはmax-width:calc(100% - 10px); display:inline;になります。

考えられるのは、タイトルの最大幅をアイコンの幅から除いた幅（5ピクセル幅と5ピクセル幅）にすることです。重要なことに、通常の方法であるinline-blockではなく、タイトルの表示をinlineに設定しました。最後に、我々はそれがtext-align:centerが

https://jsfiddle.net/nt0vhtmg/20/