css - 文本不在行高的中心

Question

我试图在 150 像素的 div 中水平居中放置两个 span。我认为做这个世界最简单的方法是将每个跨度的行高设置为 150px，但出于某种原因，当我尝试这种方法时，文本没有居中。

这是我的代码:

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

您可以在 cantstopshipping.com 上看到这个问题

感谢您的宝贵时间。

Answer 1

添加

.top img {
    float:left;
}

.top span {
    float:left;
}

和改变

.cantstop,
.shipping {
    line-height:130px;
}

由于顶部和底部的填充，顶部容器实际上是 130 像素而不是 150 像素。

希望我的回答有道理，如果没有，请告诉我。