HTML CSS examples for CSS Widget:Image Text
keep text over image at exactly center for any width
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div img { width:100%; height:auto; } .relative {<!--from w w w .ja v a 2s . co m--> position:relative; } .city-name { font-family:'open_sansbold'; font-size:33px; color:Chartreuse; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; margin:auto; width:100%; height:31px; text-align:center; line-height:2em; } </style> </head> <body> <div class="img-div-1 col-md-4 col-sm-4 col-lg-4 col-xs-12 relative"> <img class="img-circle img-responsive" src="https://www.java2s.com/style/demo/Opera.png" alt=""> <h4 class="city-name">Lorem ip</h4> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 img-div-2 relative"> <img class="img-circle img-responsive" src="https://www.java2s.com/style/demo/Opera.png" alt=""> <h4 class="city-name">Lorem </h4> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 img-div-3 relative"> <img class="img-circle img-responsive" src="https://www.java2s.com/style/demo/Firefox.png" alt=""> <h4 class="city-name">Lorem</h4> </div> </body> </html>