在引導按鈕中居中文本

-1

任何人都知道爲什麼我的文本不會居中？以及我如何解決它？我嘗試使用文本對齊：中心，但它仍然無法正常工作。在引導按鈕中居中文本

.btn-orange { 
 
    margin-top:10px; 
 
    width: 200px; 
 
    text-align: center !important; 
 
    margin:1px; 
 
    color: #fff; 
 
    background-color: #e3690b; 
 
    border-color: #e3690b; 
 
    padding: 20px 50px 10px 10px; 
 
    border-radius: 10px; 
 
    font-size: 27px; 
 
    font-stretch: ultra-expanded; 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
}

<button type="button" class="btn-orange" style="text-align:center !important;">Value<br> My Videos</button>

來源

2017-07-28 Vzupo

您的填充是原因 – j08691

，因爲您有不均勻的填充。你的填充是50px右邊和10px左邊。使這些值匹配，文本將居中。 –

使用填充：20px 0 20px 0;/*含義填充：右上方左下方; –

padding: 20px 50px 10px 10px;

右上角下和左不匹配。

嘗試padding: 10px 20px 10px 20px;

來源

2017-07-28 19:56:56

這裏有筆https://codepen.io/anon/pen/GvpLBJ

你有不平等的填充這引起了文本怪異的方式移動。我做的是刪除一堆屬性並添加填充：20px 20px;這會在所有側面（頂部，右側，底部，左側）上創建相同的填充（意味着按鈕內部的間距）。

padding: 20px; since its equal on all sides,

padding: 20px 20px; the first 20px applies to top and bottom and the second 20px to right and left

padding: 20px 20px 20px 20px; this goes in the direction of a clock, meaning top, right, bottom, left,

padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;

所有這些都會做同樣的事情，唯一的區別是在代碼：您可以通過兩種方式申報填充長度。

來源

2017-07-28 20:15:48 mbalac

在引導按鈕中居中文本

回答

相關問題