Einen Block von linksbündigem Text visuell zentrieren

Question

Ich habe ein Raster von Kacheln, deren Breite ein Prozentsatz des Containers ist. Jede Kachel enthält ein Symbol und einen Titel, wobei der Text links neben dem Symbol ausgerichtet ist.

Ich möchte die Sammlung des Symbols und der Text in dieser Kachel zentriert werden. Das Problem besteht darin, dass der div, der den Text enthält, nach der langen Länge des Texts die gesamte verbleibende Breite des Containers angibt.

tl: dr, ich möchte, dass der rot eingekreiste Bereich über beide Seiten des Symbols und des Textes verteilt wird, wie es nach der "Bildungs" -Kachel sucht.

einige Fliesen wie folgt aussehen:

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

mit CSS wie:

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

Die JS Geige macht es deutlicher: https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

Answer 1

Dies ist ein bisschen eine schnelle und schmutzige Lösung aber es macht den Job und Sie können es bearbeiten, um zu arbeiten, wie Sie von dort wollen.

Im Grunde gewinnt Container text-align:center;, das Icon gewinnt width:5px; und der Container new child ist ein div namens content. Schließlich erhält die Titelklasse max-width:calc(100% - 10px); display:inline;.

Die Idee ist, die maximale Breite des Titels die gesamte Breite der Box, minus der Breite, die das Symbol nimmt (5px Rand und 5px Breite). Wichtig ist, dass wir die Anzeige des Titels auf inline anstatt auf inline-block setzen, was der übliche Weg wäre. Schließlich verwenden wir den Inhalt div es zu wickeln alle auf die Mindestgröße bis dass es so verlangt, dass es text-align:center d

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