将文本垂直居中在行高容器内

Question

我希望有人可以提供帮助，因为它会导致HTML页面整个布局出现问题。

简单地在1个网站上放置我的所有文本元素，它们都略微偏离垂直中心，即在下面比上面更多填充。当我更仔细地查看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

查看我的answer

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;
}