CSS - 引導按鈕內部水平中心2行

HTML

<div id="deal-button"> 
     <a class="btn btn-primary" href="www.yahoo.fr"> 
     <span class="glyphicon glyphicon-star pull-left" aria-hidden="true"></span> 
     <span style= "font-weight: bold;font-size: 18px;text-transform: uppercase;">Take</span>     <br/> 
     <span style= "font-style: italic">the deal</span> 
     </a> 
    </div>

CSS

#deal-button { 
    position: absolute; 
    width: 14%; 
    top: 50%; 
    right: 2%; 
} 

#deal-button a { 
    display: block; 
    margin-bottom: 10px; 
    font-size: 12px; 
    padding: 4px 12px; 
    white-space: normal; 
    line-height: 1.2; 
} 

#deal-button .glyphicon { 
    top: 8px;//override glitch in glyphicon vertical position 
}

請注意，我不希望使用一個符合包裝，但真正用<br/>從第二行刪除第一部分。我總是希望文本的兩個部分在按鈕內的兩條不同的線上分開。他們將在被動態注入後作爲text_part1和text_part2

來源

2016-11-16 Mathieu

是否允許修改html結構 – San

您可以在底線上設置左邊距。

margin-left: 8px;

像這樣：https://jsfiddle.net/7s4cdy2t/

或者設置你的圖標的位置，像這樣：https://jsfiddle.net/5dxjfL4v/

來源

2016-11-16 11:58:14

似乎有效。但爲什麼我們還需要這個餘量？它從哪裏來？它平衡了左邊的圖標嗎？ – Mathieu

這是因爲你需要考慮房間圖標占據第一行@Mathieu –

雖然你應該把它寫在CSS;

<span style= "font-style: italic;padding-left:14%;">the deal</span>

來源

2016-11-16 11:58:47

CSS - 引導按鈕內部水平中心2行

回答

相關問題