Text on the image in multiple DIVs
Question
I have simple CSS container and 3 different DIVs inside which aligned center. In each DIV, there is a image and text above of each image . This so far working fine.
However, I like to put the text over the each image of possible (center inside the image). I tried to play with this instruction ( here ), but couldn't get it to work. Please help!
Here is the CSS:
.containerCurve1 {
width:90%;
border:0px solid black;
text-align:center;
margin-left:auto;
margin-right:auto;
background-color:white;
border-radius: 25px;
padding:20px;
max-height: 80%;
height: 80%;
height:80vh;
}
.imgLevel1
{
margin-right:15px;
width:300px; height:260px;
background:#B2B4B3;
padding:12px;
border:2px solid #FFB652;
}
.linkImage
{
text-decoration: none;
}
Here is the HTML:
<div class="containerCurve1">
<div style='display: inline-block; vertical-align: top;'>
<a href="page1.html" class="linkImage">
<span class="titlePicture">Picture 1</span><br>
<IMG SRC="../project_img/Pic1.png" class="imgLevel1">
</a>
</div>
<div style='display: inline-block; vertical-align: top;'>
<a href="page2.html" class="linkImage">
<span class="titlePicture">Picture 2</span><br>
<IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
</a>
</div>
<div style='display: inline-block; vertical-align: top;'>
<a href="page3.html" class="linkImage">
<span class="titlePicture">Picture 3</span><br>
<IMG SRC="../project_img/Pic1.png" class="imgLevel1" >
</a>
</div>
</div>
2 answers
solution1
2 ACCPTED 2015-10-02 20:44:43
How about putting the span below and using a negative top margin?
.containerCurve1 { width:90%; border:0px solid black; text-align:center; margin-left:auto; margin-right:auto; background-color:white; border-radius: 25px; padding:20px; max-height: 80%; height: 80%; height:80vh; } .imgLevel1 { margin-right:15px; width:300px; height:260px; background:#B2B4B3; padding:12px; border:2px solid #FFB652; } .linkImage { text-decoration: none; } .titlePicture { display:block; margin-top:-150px; }
<div class="containerCurve1"> <div style='display: inline-block; vertical-align: top;'> <a href="page1.html" class="linkImage"> <IMG SRC="../project_img/Pic1.png" class="imgLevel1"/> <span class="titlePicture">Picture 1</span> </a> </div> <div style='display: inline-block; vertical-align: top;'> <a href="page2.html" class="linkImage"> <IMG SRC="../project_img/Pic1.png" class="imgLevel1" /> <span class="titlePicture">Picture 2</span> </a> </div> <div style='display: inline-block; vertical-align: top;'> <a href="page3.html" class="linkImage"> <IMG SRC="../project_img/Pic1.png" class="imgLevel1" /> <span class="titlePicture">Picture 1</span> </a> </div> </div>
Note: Click "full page" after you run the snippet.
solution2
2 2015-10-02 20:59:29
Explanation
There are lots of ways you could achieve this behavior.
One is changing the CSS property position of the wrapper to relative and of the title to absolute . Afterwards you place the title in the middle of the wrapper using top: 50% and left: 50% . After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation. So we fix with the property transform: translate(-50%, -50%) , which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.
Another possibility would be using the CSS property display: flex . That would be easier because the entire layout is handled by the property. You could check more about this in A Complete Guide to Flexbox .
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { margin: 10px; display: inline-block; } .box span { font-size: 30px; border: 1px solid #000; background: #000; color: #fff; } .box.position { position: relative; } .box.position > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .box.flex { display: flex; align-items: center; justify-content: center; } .box.table { display: table-cell; vertical-align: middle; text-align: center; } .google { width: 544px; height: 184px; background: url('https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat; } </style> </head> <body> <div class="box position"> <img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> <span>this is centered</span> </div> <div class="box flex google"> <span>this is also centered</span> </div> <div class="box table google"> <span>and finally this</span> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.