Визуально сосредоточить блок текста с левым выравниванием

Question

У меня есть сетка из плит, ширина которой в процентах от контейнера. Каждый фрагмент содержит значок и заголовок, текст которого выравнивается по значку.

Я хотел бы, чтобы коллекция иконки и текста была сосредоточена в этой плитки. Проблема в том, что как только текст достаточно длинный, чтобы обернуть, div, содержащий текст, утверждает, что это вся оставшаяся ширина контейнера.

tl: dr, Я хочу, чтобы пространство, обрамленное красным, было распространено по обеим сторонам значка и текста, так как оно ищет «образование».

некоторые плитки выглядеть следующим образом:

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

с CSS, как:

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

скрипку JS делает его более ясным: https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

Answer 1

Это немного быстрое и грязное решение но он выполняет эту работу, и вы можете отредактировать ее, чтобы работать, как вы хотите оттуда.

В основном, прибыль от контейнера text-align:center;, значок получает width:5px;, а контейнеры - новым дочерним элементом. Наконец, заголовок класса получает max-width:calc(100% - 10px); display:inline;.

Идея состоит в том, чтобы сделать максимальную ширину заголовка всей шириной окна, минус ширина, которую занимает значок (5px margin и 5px width). Важно отметить, что мы установили отображение заголовка на inline вместо inline-block, что было бы обычным способом. Наконец, мы используем DIV контента, чтобы обернуть все это до минимального размера, что она требует, чтобы он мог быть text-align:center «d

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