Question

无法弄清楚为什么会有额外的间距。花了不少时间试图找出CSS样式但没有运气。我怎样才能得到BBC＆＃39;垂直居中于它旁边的线（即，在盒子的中间而不是中心）

此外，如果您在小提琴中取消注释第10行，它的行为完全不同。你能解释一下它为什么会这样做吗？

<div class="container top-nav-bar">

    <div class="top-nav-logo-area">
        <span class="logo">B</span>
        <span class="logo">B</span>
        <span class="logo">C</span>
    </div>

    <div class="top-nav-link-div">
    <!--<a class="black-nav-links" href="#">Sign in</a>-->

    </div>


      html,body,p {
    margin: 0;
    padding: 0;
  }

   .container {
        width: 1000px;
        margin: 0 auto;
    }

    .top-nav-bar {
        height: 40px;
    }

    .top-nav-logo-area {
        display: inline-block;
        margin-right: 20px;
    }

    .logo {
        background-color: black;
        color: white;
        font-family: monospace;
        font-size: 25px;
    }

    .top-nav-link-div {
        display: inline-block;
        height: 100%;
        border-left: 1px grey solid;
        font-weight: bold;
        font-family: sans-serif;
        font-size: 12px;
        color: black;

    }

Answer 1

对于您的所有要求，我建议删除您的＆＃34;身高＆＃34;在导航栏中设置。您需要添加和调整边距和填充以使徽标均匀放置，您还需要使用＆＃34; position：relative;＆＃34;在容器和＆＃34;登录＆＃34; div将位置准确地放在垂直中间。

这是一个jsFiddle。

http://jsfiddle.net/deborah/t8oyLprs/1/

这是CSS。如果您正在构建整个网站并尝试自定义Bootstrap，那么您将从Google搜索CSS教程并完成它们中受益。

   html,body,p {
        margin: 0;
        padding: 0;
   }

   .container {
        width: 100%;
        margin: 0 auto;
    }

    .top-nav-bar {
        /* remove the height and let the margins/paddings on the child divs set it */
        border-bottom: 1px #cccccc solid;
    }

    .top-nav-logo-area {
        display: inline-block;
        position: relative; /* makes this container accept positions for the child div */
        margin: 10px; /* equal margin around the logo centers it vertically */
        padding: 10px 20px 10px 10px; /* padding top and bottom centers the border */
        border-right: 1px solid #cccccc;
    }

    .top-nav-logo-area:after {
      content: '';
      display: table;
      width: 100%;
    }

    .logo {
        background-color: black;
        color: white;
        font-family: monospace;
        font-size: 25px;
    }

    .top-nav-link-div {
        display: inline-block;
        height: 100%;
        border-left: 1px grey solid;
        font-weight: bold;
        font-family: sans-serif;
        font-size: 12px;
        color: black;
        position: relative; /* necessary for positioning */
          top: -5px; /* the position adjustment */

    }

您的评论行包含＆＃34;登录＆＃34;文本，也用于该区域的CSS。这就是为什么当你评论它时布局会改变的原因。将HTML放在评论中告诉浏览器，＆＃34;忽略这一点。＆＃34;

Answer 2

在jsfiddle中尝试这些更改

.top-nav-bar {
    border-bottom: 1px solid #cccccc;
    height: 35px;
}
.top-nav-logo-area {
    display: block;
    margin: 12px;
}

Answer 3

如果要将容器中的div水平居中放在页面上，请执行此操作。

$(document).ready(function() {
 $(document).fadeIn("slow");
});

<div>顶部的额外间距

3 个答案: