在行高容器內將文本垂直居中

Question

我希望有人可以提供幫助，因為這會導致我的HTML頁面的整個布局出現問題。

只需將我所有的文本元素放在一個網站上，它們都稍微偏離垂直中心，即，下面的填充比上面的填充多。 當我更仔細地研究Google Chrome的問題時，我注意到雖然填充（綠色）和行高（深藍色）的頂部和底部相等，但較淺的藍色框的文本位於頂部，而不是垂直居中，問題出在哪里。

我希望我似乎沒有腳步，但在視覺上可以注意到，特別是在較大的元素上。

所以我的問題是-有人知道此設置是什么以及如何更改它。 我看過其他網站，並且文字以其他網站為中心，所以我不知道這里發生了什么。

如果有幫助，它可以在Shopify網站上找到，並且在整個網站上都可以使用以下樣式-它出現在所有文本元素上：

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    display: block;
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    margin: 0 0 0.5em;
    line-height: 1.4;
}

*, input, :before, :after {
    box-sizing: border-box;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Answer 1

margin: 0 0 0.5em; 在底部增加0.5em邊距，因此文本會增加。

 function fix() { $('h1').css({marginBottom:0}); } 

 body { font-size: 25px; } div { display: inline-block; background: #f00; padding: 20px; } h1 { display: block; font-family: "Josefin Sans",sans-serif; font-weight: 700; margin: 0 0 0.5em; line-height: 1.4; background: #fbb; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Josefin Sans" rel="stylesheet" type="text/css" > <div> <h1>WORKSHOPS</h1> </div> <button onclick="fix()">FIX</button> 

Answer 2

看我的答案

https://jsfiddle.net/qq0t46pt/2/

使用flexbox：

HTML：

<ul>
<li style="float:left"><a class="active"> <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo"    style="width:125px;height:75px;"></a></a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>

CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: black;

    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    height: 370px;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: red;
}

.active {
    background-color: black;
}