我需要图像水平对齐，并在页面居中

我不知道如何水平对齐图像，并让它们在页面上居中，而不使用表格。我尝试了这与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>

来源

2014-11-07 WsMom

在这里，我做出了榜样变化，增加了一些CSS：

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

主要是我对准.footersocial使用margin: 0 auto;居中，但你需要固定的宽度。现在为了使其响应，一旦屏幕宽度改变，使用@media screen并更改.footersocial宽度。一旦图像变小，因为它们的宽度是％。

实施例：

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

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

来源

2014-11-07 01:07:42

这里有一个解决方案使用表：http://jsfiddle.net/Lkynvdxp/。

HTML：

<div id="footersocial"> 
    <a href="#"> 
     <img src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_facebook_hover.png" /> 
    </a> 
    <a href="#"> 
     <img src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_twitter_hover.png" /> 
    </a> 
    <a href="#"> 
     <img src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_linkedin_hover.png" /> 
    </a> 
    <a href = "#"> 
     <img src="http://test.peopleandplatforms.com/wp-content/uploads/2014/11/Footer_gplus_hover.png" /> 
    </a> 
</div>

CSS：

#footersocial { 
    display: table; 
    margin: 0 auto; 
} 

#footersocial > a { 
    display: inline-block; 
    position: relative; 
    width: 34px; 
    height: 33px; 
} 

#footersocial > a > img { 
    height: 100%; 
} 

#footersocial > a:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, 0.2); 
    opacity: 0; 
    transition: opacity 0.5s linear; 
} 

#footersocial > a:hover:before { 
    opacity: 1; 
}

下面是使用text-align: center另一种解决方案：http://jsfiddle.net/k7ye3t0p/。

CSS：

#footersocial { 
    text-align: center; 
} 

/* The rest is the same as in the first solution */

来源

2014-11-07 01:04:25 DRD

我需要图像水平对齐，并在页面居中

回答

相关问题