Question

好吧所以我正在使用Mosaic（用于悬停文本的jQuery插件等）。无论如何，我已经有了这个工作但是现在我的问题是文本正确对齐我正在尝试做的事情。我试图得到这样的话：“销售商品”以非常小的空间出现在彼此之上。但是，如果我使用换行符“br /”，它会在行之间的空间留下很大的间隙。我已经尝试将display属性设置为阻止。将两个“p”元素设置为“顶部”和“底部”并将它们对齐。我只是想让一个非常精通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中没有看到的CSS属性line-height，所以这应该很容易。首先在单独的行上强制使用这两个词：

<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字体大小可能没什么问题，但由于我不知道哪种字体，你应该更高/更低调整它。 / p>

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

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

在CSS中正确对齐Text，Mosaic jQuery

1 个答案: