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

Question

I'm hoping someone can help because it's causing problems over the whole layout of my HTML page.

Simply put for all my text elements on 1 website, they are all slightly off vertical centre ie there's a bit more padding underneath than above. When I looked more closely at the problem with Google Chrome, I noticed that whilst the padding (green) and line height (darker blue) are equal top and bottom, the lighter blue box has the text sitting at the top rather than vertically centred, which is where the problem is coming from.

I hope I don't seem pedantic but it is visually noticeable, especially on the larger elements.

So my question is - does anyone know what this setting is and how can I change it. I've looked on other websites and the text is centred on other sites, so I've no idea what's going on here.

If it helps, it is on a Shopify website and the following styles are present site wide - it is occurring on all text elements:

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

At first look margin: 0 0 0.5em; adding 0.5em margin to the bottom, so text goes up.

 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

see my answer

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

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