css - Center List in side a div -


i'm trying center list images inside div. i'm getting (icons way small , not centered).

icons small , wont center

this css ive got , html

       <div id="social">                  <ul>                     <li><img src="img/footertwitter.png" alt="placeholder+image"></li>                     <li><img src="img/footerfacebook.png" alt="placeholder+image"></li>                     <li><img src="img/footeremail.png" alt="placeholder+image"></li>                 </ul>              </div>           #social { margin: 0 auto; text-align: center; width: 90%; max-width: 1140px; position: relative;   }      #social ul { /*margin: 0 0 3em 0!important;*/ padding: 0!important;  }    #social ul li { list-style-type: none; display: inline-block; margin-left: 1.5em; margin-right: 1.5em;   } 

in rule ul consider setting display property block , margins auto. if understand correctly you're trying accomplish, should center things while retaining margins assigned.

the updated css like:

#social  {   margin: 0 auto;   text-align: center;   width: 90%;   max-width: 1140px;   position: relative; }  #social ul  {   padding: 0;   margin:auto;   display: block; }  #social ul li  {   list-style-type: none;   display: inline-block;   margin-left: 1.5em;   margin-right: 1.5em; } 

this fiddle shows changes in action. hope helps.


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -