0

我正在尝试构建一个简单的 div，其中包含一段文本。

    <div id="bottom-text">
        <span>ONE STOP</span>
    </div>

这是我对“#bottom-text”有效的简单 CSS 样式：

    #bottom-text{
        font-weight:700;
        font-size:50px;
        text-align:center;
        margin:auto;
        position:relative;
        padding-top:25px;
        height:65px;
        width:auto;
    }

出于某种原因，文本“ONE STOP”部分显示在#bottom-text 之外。（只有所有字母的顶部......）我尝试使用填充来修复它，但文本随后部分溢出到填充区域！

谁能帮我弄清楚为什么这个文本显示在它应该包含在其中的 div 之外？（我一直在测试 Chrome 和 Firefox）

谢谢大家。

4

3 回答 3

3 
.largefont {
   color: #0066FF;
   font-family:arial;
   font-size: 6px;
   display: inline;
} 

<span class="largefont">block level span</span>

为 the 分配一个类span并使用它。

于 2012-08-09T16:02:45.470 回答
0

看看你的代码，#bottom-text是 65px 高度，font-size是 50px，padding-top是 25px

65-(50+25) = -10 所以你只会看到文本的前 10 个像素。

设置padding-top为较小的数量，并以正确的方式进行播放

于 2012-08-09T16:01:05.850 回答
0

检查你的线高。我能想到的唯一一件事是，您可能在其他地方添加了一些样式。尝试添加“line-height: 1;” 到您现有的#bottom-text CSS，以便您的文本实际上是 50px 高。或者，如果您希望文本在#bottom-text 中垂直居中，请使您的 line-height 与 #bottom-text (65px) 的高度匹配。

于 2012-08-09T17:59:43.637 回答