Question

我试图在150px div中水平居中两个跨度。我认为这个世界最简单的方法是将每个跨度的行高设置为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;
}

由于顶部和底部有填充物，顶部容器实际上是130px而不是150px。

希望我的回答有意义，如果没有，请告诉我。

Answer 2

要垂直对齐

DEMO

使用vertical-align:middle

.top span {
  vertical-align:middle
}

要水平对齐，

DEMO*

使用.top { text-align:center }

文字不在行高的中心

2 个答案: