HTML CSS examples for CSS Widget:Image Text
Prevent text from going into image using 'top' css attribute
<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>