Question

我知道这个问题已经被问了很多，但我找不到任何修复工作。

我阅读并尝试了alignment tutorial中所述的解决方案。

我尝试尽可能多地使用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，可以让您的工作更轻松。

Answer 1

Vertical-align不能使用Floated元素。

删除float并尝试单独使用inline-block。

这是解决方案的小提琴。 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; }

Answer 2

感谢＆＃34; Vertical-align不能使用Floated元素。＆＃34;来自@ user387249，我找到了最好的解决方案。有关详细信息，请参阅Justin Drury's answer。

最重要的变化：

#logo_container:after, #menu_container:before, #social_icons_container:before { height: 100%; content: ''; font-size: 0; vertical-align: middle; display: inline-block; }

{3}上的height: 100%已div。

这是updated JSFiddle。

垂直对齐标题元素

2 个答案: