顶部的额外间距<div>

Question

无法弄清楚为什么有额外的间距。 花了很多时间试图找出 CSS 样式，但没有运气。 我怎样才能让 'BBC' 垂直居中于它旁边的线（即，在框的中间而不是中心）

此外，如果您取消注释小提琴中的第 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

对于您的所有要求，我建议删除导航栏中的“高度”设置。 您需要添加和调整边距和填充以使徽标均匀放置，并且您还需要使用“位置：相对；” 在容器和“登录”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 */

    }

您的注释行包含“登录”文本，该文本也在该区域使用 CSS。 这就是为什么在您注释掉布局时布局会发生变化的原因。 将 HTML 放在注释中告诉浏览器，“忽略这个”。

Answer 2

在 jsfiddle 中尝试这些更改

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

Answer 3

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

.container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}