Center align text and image horizontally where text length can vary - 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

Center align text and image horizontally where text length can vary

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--from  w ww.  j ava  2s.c  om-->
   width:261px;
   height:299px;
   background:yellow;
   text-align:center;
}

.imagetext {
   width:auto;
   height:21px;
   background:green;
   position:relative;
   top:51px;
   text-align:center;
   display:inline-block;
}

.location-icon {
   width:21px;
   display:inline-block;
   margin-right:6px;
   float:left;
}

.location-text {
   font-size:13px;
   display:inline-block;
   float:left;
   position:relative;
   top:6px;
}

body {
   background:white;
   font-family:sans-serif;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="imagetext"> 
    <img class="location-icon" src="https://www.java2s.com/style/demo/Firefox.png"> 
    <span class="location-text">Lorem ipsum dolor sit am</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials