Text in picture

Question

I am really struggling with getting a text in the middle of every picture. My gallery has 50 pictures and each of them has a different size. This is my code but it doesn't work :/ could anyone help, please? All "sample" text should be in the middle of the.

html:

<div class="row"> 
<div class="column">

<img src="/artbook/1.jpg">
<p> sample </p>
<img src="/artbook/2.jpg">
<p> sample</p>
<img src="/artbook/3.jpg">
<p> sample</p>
<img src="/artbook/4.jpg">
<P> sample </p>
<img src="/artbook/5.jpg">
<P> sample </p>
</div>
</div>

css:

.column img {
 margin-top: 10px;
 vertical-align: middle;
 display: block;
 align-content: center;
 max-width: 250px;

.column p{
 position: absolute;
 text-align: center;
 z-index: 1;

I would switch your layout style to your images being backgrounds within a div element, and the placing the text within the div. You will need to use padding to create spacing, and set your backgrounds to use the background-size:cover — Cam, Mar 02 '18 at 18:03
Possible duplicate of [Horizontal centering text over image via CSS](https://stackoverflow.com/questions/9209764/horizontal-centering-text-over-image-via-css) — Heretic Monkey, Mar 02 '18 at 18:39
I made another edit, to show different size images as an example — D.B., Mar 02 '18 at 19:28

Sreekanth Reddy Balne · Answer 1 · 2018-03-02T19:35:39.370

0

Check it out.

First create a holder for your image and text. Give it position:relative. Now, absolutely position your p element containing text relative to its holder. But extend your p to all sides with top:0; bottom:0; left:0; right:0;. Now p is occupying the whole holder. Just apply display:flex; to it and center the content with justify-content:center; align-items:center.

.holder{
  position:relative;
  display:inline-block;
}
.holder:hover img{
  filter: brightness(100%);
}
.column img {
 filter: brightness(45%);
 margin-top: 10px;
 vertical-align: middle;
 display: block;
 align-content: center;
 max-width: 250px;
}
.column p{
 position: absolute;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index: 1;
 top:0;
 bottom:0;
 left:0;
 right:0;
 }

<div class="row"> 
<div class="column">
<div class='holder'>
<img src="http://via.placeholder.com/350x100">
<p> sample </p>
</div>
<div class='holder'>
<img src="http://via.placeholder.com/350x150">
<p> sample </p>
</div>
</div>
</div>

edited Mar 02 '18 at 19:35

answered Mar 02 '18 at 18:34

Sreekanth Reddy Balne

3,264
1
18
44

yeah this works !! thank you ! altough I had hover on that .column img now it doesnt work. any ideas ? i am really desprate :( – Ales Waloszek Mar 02 '18 at 19:25
What would you like to happen on hover?? on the `.column img` ? – Sreekanth Reddy Balne Mar 02 '18 at 19:27
basically the image is gonna be with " filter: brightness(45%)" and when you put cursor on it it will go back to 100% – Ales Waloszek Mar 02 '18 at 19:33
edited the code for you. check it. Use this `.holder:hover img` selector to apply the filter. – Sreekanth Reddy Balne Mar 02 '18 at 19:36
yeah it works but also the text gets lower brightness. – Ales Waloszek Mar 02 '18 at 19:40
The text is not getting lower brightness. It is an illusion created by its background image. The text is on top of it. You need to apply `color:` to `p` accordingly. – Sreekanth Reddy Balne Mar 02 '18 at 19:44
ahh thank you so much ! you have no clue how much you helped ! – Ales Waloszek Mar 02 '18 at 19:52

kojow7 · Answer 2 · 2018-03-02T18:55:48.433

Something like this should work using an outer div container. It also uses the translate function to properly center the text both vertically and horizontally according to the parent container. One thing to keep in mind is that when you want to position something according to the parent container then the parent container must also be relative or absolute.

Also, by default, a paragraph element has extra padding around it. You may prefer to use a div instead.

.column div.outer {
     position: relative;
     display: inline-block;
}

.column img {
     margin-top: 10px;
     vertical-align: middle;
     align-content: center;
     max-width: 250px;
 }
 
.outer div{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
}

<div class="row"> 
  <div class="column">
    <div class="outer">
      <img src="1.jpg">
      <div> sample1 </div>
    </div>
    <div class="outer">
      <img src="2.jpg">
      <div> sample2</div>
    </div>
    <div class="outer">
      <img src="3.jpg">
      <div> sample3</div>
    </div>
    <div class="outer">
      <img src="4.jpg">
      <div> sample4 </div>
    </div>
    <div class="outer">
      <img src="5.jpg">
      <div> sample5 </div>
    </div>
  </div>
</div>

Text in picture

2 Answers2