尝试对齐导航栏中的所有内容

Question

我一直坚持尝试将导航栏上的所有内容（徽标，链接和脸谱图标）对齐，以便全部垂直居中。我做了一些研究，得出了StackOverflow的一个好主题，可以在这里找到：How do I vertically center text with CSS?

我尝试了所提出的建议都无济于事。我真的对此感到茫然，并希望在多个浏览器（移动设备）上使我的导航看起来很好的任何帮助。

我提出的另一个问题是能够在网页主体中添加内容。正如您在下面的codepen中看到的那样，正文中写入的一些内容被标题隐藏。我可以添加换行符来解决这个问题，但我90％确定我的内容布局方式（标题，主页，页脚都包含在body标签中）不正确。

CodePen

以下是我尝试解决问题的方法：headerLeft指的是链接左侧的徽标，headerRight反之亦然。标题标记的类为verticalAlignHelper，但似乎没有做任何事情，因此verticalAlignHelper现在还没有被使用。

.headerLeft {
    margin-left: 30px;
    margin-right: 40px;
    float: left;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


.headerRight {
    margin-left: 30px;
    margin-right: 40px;
    float: right;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


verticalAlignHelper {
    vertical-align: middle;
    line-height: 150px;
    height: 150px;
}

非常感谢任何建议。这是我的第一个网站，所以如果建议尽可能基本，我会很感激。欢呼声。

Answer 1

防止被遮盖的身体内容

使用JavaScript在padding-top上设置body，大于顶部高度。像这样：

$("body").css("padding-top", $("nav").height() + 25);

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

修复导航栏图像的垂直对齐

因为我看不到图像，以下只是建议：

1. 最简单：使导航栏与图像的高度相同（反之亦然）
2. 手动硬编码边距（仅当您知道所有内容的确切高度时）
3. 最难但最好使用JavaScript（动态且有趣）

$(function() {
  var elem = $("#img4");
  elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
img {
  height: 75px;
}
div.navbar {
  width: 100%;
  height: 100px;
  background-color: lightgrey;
  margin-bottom: 20px;
}
div.text {
  line-height: 100px;
  display: inline-block;
  vertical-align: top;
}

img#img1 {
  height: 100px;
}

div#div2 {
  height: 75px;
}
div#text2 {
  line-height: 75px;
}

img#img3 {
  margin: 12.5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
  <div class="text">Uncentered image</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
  <div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
  <div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
  <div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
  <div class="text">Centered using JS and jQuery (dynamic)</div>
</div>