[英]Vertically align header elements
我知道这个问题已经被问了很多,但我找不到适用于我的样本的任何修复程序。
我阅读并尝试了对齐教程中所述的解决方案。
我试着玩display: inline-block;
和vertial-align: middle;
尽我所能。
我的HTML:
<div id="header_container">
<div id="logo"></div>
<div id="menu_and_social_icons_container">
<div id="menu_container">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--//menu_container-->
<div id="social_icons_container">
<div id="twitter_icon"></div>
<div id="pinterest_icon"></div>
</div><!--//social_icons_container-->
</div><!--//menu_and_social_icons_container-->
</div><!--//header_container-->
我的CSS:
/* Header */
#header_container { padding: 10px 0 30px; width: 100%; height: auto; padding-top: 3%; border-bottom: 1px solid #CBCBCB; display: inline-block; }
#logo { background: #aaa; width: 200px; height: 100px; float: left; vertical-align: middle; }
#menu_and_social_icons_container { float: right; display: inline-block; vertical-align: middle; }
#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; float: left; font-family: 'Lato', sans-serif; vertical-align: middle; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }
#social_icons_container { float: right; vertical-align: middle; }
#social_icons_container div { width: 50px; height: 50px; float: left; margin-left: 25px; }
#twitter_icon { background: #555; }
#pinterest_icon { background: #888; }
这是一个JSFiddle ,它使事情变得更容易。
垂直对齐不适用于浮动元素。
删除浮点,尝试单独使用内联块来实现。
这是解决方法。 http://jsfiddle.net/yvxb1os1/11/
/* Header */
#header_container { padding: 10px 0 30px; width: 100%; height: auto; padding-top: 3%; border-bottom: 1px solid #CBCBCB; display: inline-block; }
#logo { background: #aaa; width: 200px; height: 100px; display: inline-block; vertical-align: middle; }
#menu_and_social_icons_container { display: inline-block; vertical-align: middle; width: calc(100% - 204px); }
#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; font-family: 'Lato', sans-serif; vertical-align: middle; display: inline-block;}
#menu_container ul { list-style-type: none; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }
#social_icons_container { float: right; vertical-align: middle;}
#social_icons_container div { display: inline-block; width: 50px; height: 50px; float: left; margin-left: 25px; }
#twitter_icon { background: #555; }
#pinterest_icon { background: #888; }
感谢“垂直对齐将不适用于浮动元素”。 我从@ user387249找到了最好的解决方案。 有关更多详细信息,请参见Justin Drury的答案 。
最重要的变化:
#logo_container:after, #menu_container:before, #social_icons_container:before { height: 100%; content: ''; font-size: 0; vertical-align: middle; display: inline-block; }
height: 100%
在我的3个浮动div
上为height: 100%
。
这是更新的JSFiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.