在CSS中正確對齊文本，馬賽克jQuery

好的，所以我使用Mosaic（一個jQuery插件懸停文本等）反正，我有這個工作，但現在我的問題是文本正確對齊到我試圖去做。我試圖說出這樣的話：「銷售物品」以很小的空間出現在彼此的頂部。但是，如果我使用換行符「br /」，它會在行間留下很大的空隙。我試着設置顯示屬性來阻止。將兩個「p」元素設置爲「頂部」和「底部」，並將它們對齊。我只是想找一個很擅長CSS的人來幫忙。在CSS中正確對齊文本，馬賽克jQuery

基本上我試圖讓文本正確對齊。

的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缺乏。

來源

2012-06-25 Justin Beaudry

我想我只是解決了你的問題，但如果不是這樣，請用你的所有代碼做一個[jsfiddle]（http://jsfiddle.net），重現你的問題。這包括插件JavaScript和你寫的，因爲它可以都是相關的。 – sg3s

您可能正在尋找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財產和ASIGN的值，我把什麼可能是好的在60像素字體大小的猜測，但因爲我不知道哪種字體，你應該可以調高/降低。

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-25 21:38:13 sg3s

太簡單了。咄！非常感謝。 –

這就是爲什麼你問:) – sg3s

在CSS中正確對齊文本，馬賽克jQuery

回答

相關問題