Place text in the middle of an image vertically - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

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

Description

Place text in the middle of an image vertically

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum </title> 
  <style>
.articleTitle {<!--from   ww w. j av a2s .c  o m-->
   display:table;
   position:relative;
   width:51%;
}

h1 {
   margin:0;
   text-align:center;
}

span {
   position:absolute;
   top:51%;
   left:0;
   right:0;
   display:inline-block;
   -webkit-transform:translate(0, -51%);
   -moz-transform:translate(0, -51%);
   -ms-transform:translate(0, -51%);
   -o-transform:translate(0, -51%);
   transform:translate(0, -51%);
}

img {
   display:block;
   width:100%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="articleTitle"> 
   <h1 class="title"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> </h1> 
  </div>  
 </body>
</html>

Related Tutorials