1

好的，所以我正在使用Mosaic（用于悬停文本等的 jQuery 插件）无论如何，我已经完成了这项工作，但现在我的问题是文本与我正在尝试做的事情正确对齐。我试图让这些词：“销售项目”以非常小的空间出现在彼此之上。但是，如果我使用换行符“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缺少。

4

1 回答 1

1

您可能正在寻找line-height我没有在您的 CSS 中定义的 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;
}

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

于 2012-06-25T21:38:13.507 回答