how to put text over image without absolute positioning - css

Question

I am using bootstrap for layout, one of the difficulties I have run into is about how to put the text over image. I have tried all things I can do such as using background-image which does not work. One of the approaches is to place image as relative and put the text in the absolute position.
However for my issue, I can't use absolute position because I have so many images and texts' lengths are varied. So I have to solve issue this by using align-center..
If someone is familiar with this issue, could you give some advice for this problem.. I have to put the text over the image on the very center vertically and horizontally.
<div class="row justify-content-center">
<div class="col-sm-auto">
<img src="img/1.jpg">
</div>
<div class="col-sm-auto">
<img src="img/2.jpg">
</div>
<div class="col-sm-auto">
<img src="img/3.jpg">
</div>
</div>

Answer 1

If the image source isnt changing, then you can try setting background: url(img/1.jpg) from CSS and adjust its position using background-position
Check out the fiddle here.
http://jsfiddle.net/yktvod54/2/
html
<div class="row justify-content-center">
<div class="col-sm-auto image-1">
text1
</div>
<div class="col-sm-auto image-2">
text2
</div>
<div class="col-sm-auto image-3">
text3 with longer text
</div>
css
.col-sm-auto {
color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.col-sm-auto.image-1 {
width: 200px;
height: 150px;
background:
url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
background-size: cover;
}
.col-sm-auto.image-2 {
width: 200px;
height: 200px;
background: url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
background-size: cover;
}
.col-sm-auto.image-3 {
width: 250px;
height: 250px;
background:
url("https://vignette.wikia.nocookie.net/disney/images/8/89/Cute-Cat.jpg/revision/latest?cb=20130828113117");
background-size: cover;
}

Answer 2

Set the image as a background to a div, make that div display:flex; justify-content: center; align-items: center; and give it a width/height. The flex alignments will push everything to the center of the div, but it needs a height/width or the div will only be the size of the text. Add flex-wrap: wrap; and the text will wrap around, but there isnt a nice breakpoint like with word-break

Answer 3

I can't use absolute position because I have so many images and texts' lengths are varied
You can use relative lengths for positioning you texts so they will be centered whatever their size.
You will need the translate CSS function as well.
.image-wrapper {
width: 400px;
position: relative;
}
.image-wrapper img {
width: 100%;
height: auto;
}
.image-wrapper figcaption {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
font-size: 2em;
color: white;
}
<figure class="image-wrapper">
<img src="https://image.ibb.co/n5wsKU/bg3.jpg" alt="A nice pic!">
<figcaption>A text that fits on one line</figcaption>
</figure>
In case you still don't want to use absolute positioning, here is another solution using a background-image instead of an img tag:
.image-wrapper {
width: 400px;
height: 300px;
display: flex;
}
.image-wrapper.image-01 {
background: url('https://image.ibb.co/n5wsKU/bg3.jpg') center center / cover;
}
.image-wrapper p {
margin: auto;
font-size: 2em;
color: white;
}
<div class="image-wrapper image-01">
<p>Some text</p>
</div>