Vertically and horizontally center image with line of text directly below - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Vertically and horizontally center image with line of text directly below

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div.image-wrapper {
   position:absolute;
   left:51%;
   top:51%;
   transform:translate(-51%, -51%);
   border:2px solid Chartreuse;
}

.image-wrapper img {
   display:block;
}

#test {<!--from   w  w w .  j ava 2  s. c o  m-->
   position:absolute;
   top:100%;
   width:100%;
   border:2px solid yellow;
   border-top:none;
}

#test p {
   width:100%;
   font-family:segoe;
   font-size:22px;
   text-align:center;
   color:blue;
}
</style> 
 </head> 
 <body> 
  <div class="image-wrapper"> 
   <a href="home.html"> <img src="https://www.java2s.com/style/demo/Opera.png"> </a> 
   <div id="test"> 
    <p>Lorem ipsum dolor sit am</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials