Centre text within responsive image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

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

Description

Centre text within responsive image

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">
#imgtxt {<!--  w w w. j  av  a 2  s  .c om-->
   z-index:11;
   position:absolute;
   color:Chartreuse;
   left:21%;
   top:36%;
}

img.ri
 {
   position:relative;
   max-width:76%;
   display:inline-block;
   vertical-align:middle;
}

img#hv {
   filter:;
   filter:gray;
   -webkit-filter:grayscale(2);
}

img#hv:hover {
   filter:none;
   -webkit-filter:grayscale(0);
}

@media screen and (orientation: portrait)  {
   img.ri {
      max-width:91%;
   }

}

@media screen and (orientation: landscape)  {
   img.ri {
      max-height:91%;
   }

}
</style> 
 </head> 
 <body> 
  <div class="image"> 
   <img src="https://www.java2s.com/style/demo/Opera.png" class="ri" id="hv"> 
   <span id="imgtxt">Lorem ipsum dolor sit amet</span> 
  </div>  
 </body>
</html>

Related Tutorials