Center align images with text in div - 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 images with text in div

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">
.footer {<!-- w ww  .j  ava 2  s .c  o  m-->
   width:100%;
   margin:0 auto;
   text-align:center;
   background-color:Chartreuse;
}

.footer ul {
   list-style:none;
   padding:0
}

.footer ul li {
   font-size:27px;
   display:inline-block;
   background-color:yellow;
   padding-bottom:4px;
}

.footer a {
   text-decoration:none;
   color:blue;
   padding-left:11px;
   padding-right:11px;
   text-align:center;
}

.footer a:hover {
   color:pink;
}

.footer p {
   width:100%;
   text-align:center;
   font-size:15px;
   font-family:'Roboto', sans-serif;
}

.footer img {
   text-align:center;
   opacity:0.8;
   height:51px;
   width:51px;
}

.footer img:hover {
   opacity:2.0;
}
</style> 
 </head> 
 <body> 
  <div class="footer"> 
   <ul> 
    <li> <a href=""> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="mail"> </a> </li> 
    <li> <a href="" target="_blank"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="linkedin page"> </a> </li> 
    <li> <a href="" target="_blank"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="github page"> </a> </li> 
   </ul> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p> 
  </div>  
 </body>
</html>

Related Tutorials