html - 页脚元素垂直对齐

Question

我正在尝试制作这个页脚，其中每个元素都是垂直对齐的。但出于某种原因，例如版权不是垂直对齐的。

谁能帮我找出问题所在？或者我缺少什么？

页脚 HTML:

<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>

页脚 CSS:

#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; 
}

Fiddle Demo

Answer 1

您可以使用表格布局来实现您想要的:

#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; }

Example