Css align text in front of image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

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

Description

Css align text in front of image

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
div {<!--  www  . j  a  v  a 2s .  c  om-->
   width:201px;
   height:201px;
   position:relative;
   background-color:Chartreuse;
}

div img {
   background-color:yellow;
   width:181px;
   height:181px;
   position:absolute;
   display:block;
   left:51%;
   margin-left:-91px;
   margin-top:-91px;
   top:51%;
}

div span {
   position:absolute;
   background-color:blue;
   width:100%;
   text-align:center;
   color:pink;
   top:51%;
   margin-top:-11px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div> 
   <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   <span>Lorem</span> 
  </div>  
 </body>
</html>

Related Tutorials