css - 在 CSS、Mosaic jQuery 中正确对齐文本

Question

好的，我正在使用 Mosaic (用于悬停文本等的 jQuery 插件)无论如何，我已经可以正常工作了，但现在我的问题是文本与我想要做的正确对齐。我试图让单词:“sale items”以非常小的空间出现在彼此之上。但是，如果我使用换行符“br/”，它会在行与行之间留下很大的空隙。我试过将显示属性设置为阻止。将两个“p”元素设置为“top”和“bottom”并以这种方式对齐它们。我只是想让非常精通 CSS 的人帮忙。

基本上我正在尝试让文本正确对齐。

HTML:

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

CSS:

h1.mosaic {
    display: inline;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}
.mosaic-block {
    position: absolute;
    overflow: hidden;
    width: 320px;
    height: 150px;
    left: 50%;
    top: 475px;
   -webkit-filter: grayscale(1);
}
.mosaic-block:hover {
    -webkit-filter: grayscale(0);
}
.mosaic-backdrop {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
.mosaic-overlay {
    display :none;
    z-index: 1;
    position: absolute;
    height: 300px;
    bottom: -150px;
    color: #FFF;
    text-decoration: none;
}
.mosaic-overlay p {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    padding-top: 90px;
    padding-left: 30px;
}

jQuery 方面工作正常，它完成了它的工作。但是我缺少 CSS。

Answer 1

您可能正在寻找 CSS 属性 line-height，我没有在您的 CSS 中看到它的定义，所以这应该很容易。首先强制这两个词在不同的行上:

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale<br/> items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

添加 line-height 属性并分配一个值，我猜测了 60px 字体大小可能没问题，但由于我不知道哪种字体，你应该调整它更高/更低。

h1.mosaic {
    display: inline;
    line-height: 50px;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}

如果文本被框裁剪，您可以根据需要在顶部/底部添加填充以获得您想要的外观。