I am trying to center two spans horizontally in a 150px div. I thought the simplest way of doing this world be to set the line-height of each of the spans to 150px, but for some reason, the text is not being centered when I try this method. 

Here is my code:

HTML:

```
<div class="top">
    <img src="/wp-content/themes/shipping/images/TV.png" />
    <span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>

```

CSS:

```
.top {
    height: 150px;
    padding: 10px 0;
}

.top img {
    max-height: 100px;
    padding: 0 10px;
}

.cantstop {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 150px;
    font-size: 45px;
    margin: auto 0;
    text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
    }

.shipping {
    font-family: 'Grand Hotel', cursive;
    font-weight: normal;
    font-size: 75px;
    line-height: 150px;
    margin: auto 0;
    text-shadow: 4px 4px 0px rgba(217,144,178,1);
    }

```

You can see the issue in action at cantstopshipping.com

Thank you for your time.