Vertically centring text inside line height container

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

Possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Chains, Jun 07 '16 at 17:56

Sergey Khalitov · Answer 1 · 2016-06-07T19:05:10.323

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>

score 0 · Answer 2 · edited May 23 '17 at 10:34

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

Vertically centring text inside line height container

2 Answers2

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