Prevent text from going into image using 'top' css attribute - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

Description

Prevent text from going into image using 'top' css attribute

Demo Code

ResultView the demo in separate window


<html>
 <head> 
  <meta name="viewport" content="width=device-width"> 
  <style>
.row {<!-- w  w w  . j  av  a2  s  .  c  o m-->
   font-size:0;
   margin:0 auto;
   max-width:501px;
   position:relative;
}

.row * {
   font-size:2rem;
}

img {
   max-width:100%;
}

.left,
.right {
   display:inline-block;
   width:51%;
}

.right {
   position:relative;
   top:51px;
}

.middle {
   position:absolute;
   background:white;
   padding:11px;
   font-size:3rem;
   margin:26% auto;
   right:0;
   left:0;
   display:inline-block;
   border-radius:51px;
   z-index:2;
   width:51px;
}
</style> 
 </head> 
 <body> 
  <div class="row"> 
   <div class="left"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <div class="caption-text">
      Lorem ipsum dolor 
    </div> 
   </div> 
   <div class="middle">
     Lorem 
   </div> 
   <div class="right"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
    <div class="caption-text">
      Lorem ipsum dolor 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials