Question

左侧有徽标，图标列表+垂直边框+右侧链接。如何将所有这些垂直居中？

HTML

<header id="masthead" class="site-header" role="banner">
        <div class="site-branding">
            <h1 class="site-title"><a href="/" rel="home">Keebs</a></h1>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <ul id="social-links">
                <li class="behance"><img src="http://i.imgur.com/KTsyaQR.png" alt="Behance"></li>
                <li class="twitter"><img src="http://i.imgur.com/cleZOWn.png" alt="Twitter"></li>
                <li class="instagram"><img src="http://i.imgur.com/USZmKla.png" alt="Instagram"></li>
            </ul>
            <span class="vertical-border"></span>
            <a class="contact" href="/contact">Get in touch</a>
        </nav><!-- #site-navigation -->
</header>

CSS

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 92px;
}

#masthead #site-navigation {
  float: right;
}

#masthead #site-navigation #social-links {
  display: inline-block;
}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
}

#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 26px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  display: inline-block;
  height: 92px;
  margin-right: 30px;
  width: 0;
}

#masthead #site-navigation .contact {
  display: inline-block;
}

Answer 1

<header>的高度为92px。

图标<img>的高度为26px。

如果您将<img>s（即13px）的高度的50％添加到<header>的高度，并将其表示为<li>的高度，然后你可以垂直居中图标。

请参阅：

ul#social-links li {
  height: 105px;
  vertical-align: middle;
}

如果您再替换

#masthead .site-branding h1 {
    line-height: 92px;
}

与

#masthead a {
  height: 92px;
  vertical-align: middle;
}

您将垂直居中（链接）标题和右侧链接。

Answer 2

根据您在评论部分发布的图片，我准备了这个：http://jsfiddle.net/jno6rv1z/4/。我试着不要改变你的CSS。

错误是;

- 某些元素缺少高度值

- 你的一些元素缺少浮动值。

- 某些元素具有默认样式，如边距和填充。你应该使用html reset css文件消除它们。

的CSS：

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 92px;
    margin:0;
    font-size:26px;
}

#masthead #site-navigation {
  float: right;
}

#masthead #site-navigation #social-links {
  display: inline-block;
    margin:0;
    padding:0;
    float:right;

}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
}

#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 29px;
  position:relative;
    top:10px;
}

#masthead #site-navigation li{
line-height:92px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  display: inline-block;
  height: 92px;
  margin-right: 30px;
  width: 0;
    float:right;
}

#masthead #site-navigation .contact {
  display: inline-block;
    float:right;
    line-height:92px;
}

Answer 3

试试这个。，

#masthead {
  background: #0F0F0F;
  height: 92px;
}

#masthead .site-branding {
  float: left;
}

#masthead .site-branding h1 {
  line-height: 20px;
}

#masthead #site-navigation {
  float: right;
  display:inline-block;
}

#masthead #site-navigation #social-links {
  float:left;
  line-height:80px;
}

#masthead #site-navigation #social-links li {
  display: inline-block;
  list-style: none;
    line-height:10px;
}
#masthead #site-navigation #social-links li.behance {
  margin-right: 8px;
}

#masthead #site-navigation #social-links li.twitter {
  margin-right: 10px;
}

#masthead #site-navigation #social-links li.instagram {
  margin-right: 28px;
}

#masthead #site-navigation #social-links img {
  height: 26px;
}

#masthead .vertical-border {
  border-left: 2px solid #000;
  border-right: 2px solid #3C3C3C;
  float:left;
  height: 92px;
  margin-right: 30px;
  width: 0;
}

#masthead #site-navigation .contact {
  float:left;
  line-height:80px; 
}

如何垂直居中div中的所有元素？

3 个答案: