我不知道如何水平对齐图像,并让它们在页面上居中,而不使用表格。我尝试了这与divs,但不能让它集中在页面上。我也希望他们能够做出反应,以便在缩小规模时始终保持在中间。我需要图像水平对齐,并在页面居中
这是据我的jsfiddle有:http://jsfiddle.net/DrSRT/403/
CSS
/*Black and White
--------------------------------------------------*/
.bw {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}
*/container
-----------------------------------------*/
.footersocial {
width:100%;
float:center;
}
HTML
<div id="footersocial"><div class="bw pic"><a href="https://www.facebook.com/PeopleAndPlatforms" target="_blank"><img style="float: left; margin: 2px;" src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_facebook_hover.png" alt="facebook"></a></div>
<div class="bw pic"><a href="http://twitter.com/peoplenplatform" target="_blank"><img style="float: left; margin: 2px;" src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_twitter_hover.png" alt="Twitter"></a></div>
<div class="bw pic"><img style="float: left; margin: 2px;" src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_pinterest_hover.png" alt="pinterest"></div>
<div class="bw pic"><a href="http://www.linkedin.com/company/people-&-platforms" target="_blank"><img style="float: left; margin: 2px;" src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_linkedin_hover.png" alt="linkedin"></a></div>
<div class="bw pic"><a href="https://plus.google.com/u/1/112443165541377795854" target="_blank"><img style="float: left; margin: 2px;" src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_gplus_hover.png" alt="googleplus"></a></div>
</div>