我正在尝试制作这个页脚,每个元素都垂直对齐。但出于某种原因,例如版权不是垂直对齐的。
任何人都可以帮我找出问题所在吗?或者我错过了什么?
<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<a href="https://www.facebook.com/" target="_blank"><img src="/www/assets/newImages/footer/facebook.png"></a>
<a href="https://twitter.com/" target="_blank"><img src="/www/assets/newImages/footer/twitter.png"></a>
<a href="https://plus.google.com/" target="_blank"><img src="/www/assets/newImages/footer/google plus.png"></a>
<a href="http://www.pinterest.com/" target="_blank"><img src="/www/assets/newImages/footer/pinterest.png"></a>
<a href="http://tumblr.com/" target="_blank"><img src="/www/assets/newImages/footer/tumblr.png"></a>
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">
</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>
#footerSocial {
display: inline-block;
text-align: center;
width: 100%;
margin-top: -25px;
}
#socialNetwork {
display: inline-block;
float: left;
font-size: 10px;
color: #747474;
}
#footerNewsletter {
display: inline-block;
margin: 0 auto;
font-size: 10px;
color: #747474;
}
#footerNewsletter #subscribe_ok {
margin-bottom: -5px;
}
#copyright {
display: inline-block;
float: right;
font-size: 10px;
color: #747474;
}
#footerSocial {
border: 1px solid black;
}
#socialNetwork {
border: 1px solid green;
}
#footerNewsletter {
border: 1px solid red;
}
#copyright {
border: 1px solid blue;
}
答案 0 :(得分:2)
您可以使用表格布局来实现您的目标:
#footerSocial { display: table; text-align: center; width: 100%; font-size: 10px;color: #747474;}
#footerSocial > div {display: table-cell; }
#footerNewsletter #subscribe_ok { margin-bottom: -5px; }
#footerSocial { border: 1px solid black; }
#socialNetwork { border: 1px solid green; }
#footerNewsletter { border: 1px solid red; }
#copyright { border: 1px solid blue; }