html - 我需要图像水平对齐并在页面上居中

Question

我不确定如何在不使用表格的情况下水平对齐图像并使它们在页面上居中。我用 div 试过这个，但无法让它在页面上居中。我还希望它们能够响应，以便在缩小尺寸时始终保持在中间。

这是我在 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>

Answer 1

这里我做了一个改变和添加一些 CSS 的例子:

http://jsfiddle.net/DrSRT/405/

大多数情况下，我使用 margin: 0 auto; 将 .footersocial 对齐到中心，但为此你需要固定宽度。现在要使其响应，请使用 @media screen 并在屏幕宽度更改后更改 .footersocial 宽度。一旦变小，图像也会变小，因为它们的宽度以 % 为单位。

例子:

@media screen and (max-width: 720px) {
    .footersocial {
        width: 100px;
    }
}

媒体查询 W3S 文档:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp