How to center text on top of fluidly changing image (flexbox)?

Question

This is a tricky one, and if it's too tricky I suppose the images can stay the same size.

I want to center the text inside/on top of the image as though it were a background, but I don't want to use an actual background.

I also want to keep the behavior of my current flexbox, because I like it. That means:

Three items per row.
Images capped at 66px in width.
Images resizing on small browser widths (not stricly needed).
No hardcoding the rows, it should spill over into a new row automatically.

HTML:

<div class="container">
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
  <div class="circle box">
    <img src="http://i.imgur.com/4JtXH2S.png">
    <div class="circle text">
      70
    </div>
  </div>
</div>

CSS:

.container {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: auto;
  flex-wrap: wrap;
}

.container .circle.box {
  width: 33.33%;
    width: calc(100% / 3);
  height: auto;
}

.circle.box img {
  width: 100%;
    max-width: 66px;
}

.circle.box .text {
  font-size: 30px;
}

jsfiddle: https://jsfiddle.net/hceac6mx/

It should also be noted that while I'm using a simple circle here that can be css'ed, it's just an example. So the need for an actual image is real.

How can this be achieved?

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

Here's one method that may work for you (or at least be a step in the right direction, hopefully):

Make each div holding the image and text a containing block for absolute positioning.
```
.container .circle.box { position: relative; }
```

Use absolute positioning to center the text over the image.

.circle.box .text {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%, 50%);
 }

Revised Fiddle

The text centering does break when the images are very small, but I posted this answer because you mention that image re-sizing is not strictly necessary.

UPDATE

In the comments, Gerrit Bertier has posted an enhanced demo making the text responsive, as well.

edited May 23 '17 at 11:44

Community

1
1

answered Feb 23 '16 at 14:47

Michael Benjamin

346,931
104
581
701

1

I updated your solution a bit to allow the text to recenter when the circles rescale: https://jsfiddle.net/hceac6mx/2/ Added a `width` and `max-width` to the text, set the `left` to `0` and `text-align` to `center` – Gerrit Bertier Feb 23 '16 at 15:01
@GerritBertier, nicely done! Thanks. – Michael Benjamin Feb 23 '16 at 15:03
Thanks both of you. Any idea what to do if I want the row of images to be centered? Using `margin` and `text-align` messes up the absolute positioning. Why doesn´t `align-items: center` work? – Yeats Feb 24 '16 at 07:41
@Yeats, for the images to be centered, simply center their container (`.container`). Flexbox is well-suited for this: https://jsfiddle.net/hceac6mx/3/ – Michael Benjamin Feb 24 '16 at 19:39

How to center text on top of fluidly changing image (flexbox)?

1 Answers1