DIV中的文字卡在底部

我遇到了一個奇怪的問題。我想要實現的是一個「拉伸的鑽石形狀」按鈕。這是一個以三角形開始，然後有一個延長的直的中間和另一個三角形結尾的形狀。對於這個造型，我想出了下面的CSS：DIV中的文字卡在底部

#button-medium { 
    height: 30pt; 
    position: relative; 
    display: inline-block; 
    background-color: #ff7e39; 
} 
#button-medium:before { 
    content:""; 
    position: relative; 
    display: inline-block; 
    border-bottom: 15pt solid transparent; 
    border-right: 15pt solid #ff7e39; 
    border-top: 15pt solid transparent; 
    margin-left: -15pt; 
} 
#button-medium:after { 
    content:""; 
    position: relative; 
    display: inline-block; 
    border-bottom: 15pt solid transparent; 
    border-left: 15pt solid #ff7e39; 
    border-top: 15pt solid transparent; 
    margin-right: -15pt; 
}

這將產生我要找的形狀，它甚至與內容延伸。一切都很好，很好。我的問題是，當我想用這個形狀與一些文本。文本被粘貼到我正在使用的span或div的底部！我已經嘗試過填充，保證其他divs裏面沒有任何東西似乎工作。這是我的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>&deg;</title> 
    <link href="css/52Noord.css" rel="stylesheet"> 
</head> 
<body> 
<div align="center"><div id="button-medium"><span style="padding-bottom: 3pt">The Text</span></div></div> 
</body> 
</html>

任何想法如何實現這種形狀的，並將它包含居中（水平和垂直）的文本？

Here is a JSFiddle.

來源

2014-02-18 Deddiekoel

它通常是好主意添加jsfiddle到HTML/CSS相關的問題http://jsfiddle.net/ – Xyzk

你基本上需要更改:before的position:relative和:after到floats。然後給一個line-height的內容span

更新CSS中：

#button-medium span { 
    line-height: 40px; 
} 
#button-medium:before { 
    content:""; 
    float: left; 
    border-bottom: 15pt solid transparent; 
    border-right: 15pt solid #ff7e39; 
    border-top: 15pt solid transparent; 
    margin-left: -15pt; 
} 
#button-medium:after { 
    content:""; 
    float: right; 
    border-bottom: 15pt solid transparent; 
    border-left: 15pt solid #ff7e39; 
    border-top: 15pt solid transparent; 
    margin-right: -15pt; 
}

演示：http://jsfiddle.net/L8gRw/

來源

2014-02-18 14:02:16 EmileKumfa

偉大的這完全工作。但是我將行高移到了＃button-medium，這樣我就不需要額外的跨度了！ – Deddiekoel

甜！很高興我能幫上忙：） – EmileKumfa

如果刪除跨度的內嵌樣式style="padding-bottom: 3pt"，然後更新你的CSS喜歡你的文字下方將被集中：

#button-medium span {    /* added this rule */ 
    vertical-align: top; 
} 
#button-medium { 
    height: 30pt; 
    line-height: 30pt;   /* added this property */ 
    position: relative; 
    display: inline-block; 
    background-color: #ff7e39; 
}

來源

2014-02-18 14:03:27 LGSon

DIV中的文字卡在底部

回答

相關問題