-2

I have a grid of tiles, whose width is a percentage of the container. Each tile contains an icon and a title, with the text left justified against the icon.

I'd like the collection of the icon and the text to be centered in that tile. The problem is that once the text is long enough to wrap, the div containing the text claims it's the entire remaining width of the container.

tl:dr, I want the space circled in red to be spread across both sides of the icon and text, as it looks for the 'education' tile.

tiles

some tiles look like:

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

with css like:

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

The JS fiddle makes it clearer: https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

avaleske
  • 1,793
  • 5
  • 16
  • 26

1 Answers1

0

This is a bit of a quick and dirty solution but it does the job and you can edit it to work how you want from there.

Basically, container gains text-align:center;, the icon gains width:5px; and the containers new child is a div named content. Finally the title class gains max-width:calc(100% - 10px); display:inline;.

The idea is to make the max width of title the entire width of the box, minus the width that the icon takes up (5px margin and 5px width). Importantly, we set title's display to inline to rather than inline-block which would be the usual way. Finally, we use the content div to wrap it all up to the minimum size that it requires so that it can be text-align:center'd

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

Zei
  • 409
  • 5
  • 14
  • almost! but with this the text in the title is now centered, instead of left justified against the icon :( – avaleske Jan 27 '17 at 07:56
  • No it's not. At least on my screen it looks like http://imgur.com/x77hzPX which _is_ left justified up against the icon. – Zei Jan 30 '17 at 04:29
  • If you increase the tile width to something like 200px you can see how it's centering the wrapped text as well – avaleske Jan 30 '17 at 09:16
  • Oh yeah I see what you're saying. Very strange behaviour. I'll see if I can come back with a better solution. – Zei Jan 31 '17 at 00:19