用CSS滑動門居中標題

-1

我對滑動門技術here存在問題。由於滑動門技術，描述後的標題是左浮動的，但我想要的僅僅是在產品上方的中心位置。用CSS滑動門居中標題

你能幫我理解怎麼做嗎？

下面是我用的標題的CSS：

h3.offer-title, h3#comments, h3#reply-title { 
background:url(images/offer-title-bg.png) no-repeat right bottom; 
color:#434343; 
display:block; 
float:left; 
font-size: 14px; 
margin-right: 6px; 
padding-right:6px; 
text-decoration:none; 
height: 43px; 
line-height: 0; 
position: relative; } 

h3.offer-title span, h3#comments span, h3#reply-title span { 
background:url(images/offer-title-bg.png) no-repeat; 
display:block; 
padding-left: 20px; 
height: 43px; 
line-height: 43px; 
padding-right: 16px; 
}

謝謝。

來源

2012-10-26 Niccolò Mineo

包裝我們需要您發佈** **所有的相關代碼。你能給我們HTML嗎？ – KatieK

鏈接給出404錯誤。 –

它是浮動的，因爲您在第一個CSS代碼塊中設置了float: left。爲了擺脫這種行爲，你需要擺脫浮動。

浮動消失後，如果您希望標題的背景很適合文本，就像之前一樣，元素需要有display: inline-block。

但與display: inline-block和標題上沒有設置寬度（你可以添加一個寬度，但如果你想改變文本或字體大小，它可能會中斷），它不居中。爲了讓它居中，你需要一個圍繞它的包裝元素，它有text-align: center。

所以：

添加塊：

h3.offer-title { 
    display: inline-block; /* this makes the bg fit the text */ 
    float: none; /* this overrides float:left */ 
}

裹在另一個div的，offer-title元素。

風格與

.offer-title-wrapper { 
    text-align: center; 
}

來源

2012-10-26 17:54:55 tuff

非常感謝！我看到這是唯一的解決方案。 –

用CSS滑動門居中標題

回答

相關問題