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

Question

我一直坚持尝试将导航栏上的所有内容（徽标，链接和Facebook图标）对齐都垂直居中的问题。 我做了一些研究，得出了StackOverflow的一个好主题，可以在这里找到： 如何使用CSS垂直居中文本？

我尝试过所提出的建议都无济于事。 我真的很茫然这个并且非常感谢任何有助于我的导航在多个浏览器（移动设备）上看起来很好的帮助。

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

CodePen

以下是我尝试解决问题的方法： headerLeft引用链接左侧的徽标， headerRight反之亦然。 header标签有一个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在body上设置padding-top ，仅大于顶部高度。 像这样：

 $("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>