2014-01-29 148 views
6

內的文本我想我的錨標記看起來像一個按鈕,並創造了這個風格JsFiddle如何中心錨標記

.details-button { 
    background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #FAB149; 
    -ms-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 1px 2px #999999; 
    -ms-box-shadow: 0 1px 2px #999999; 
    box-shadow: 0 1px 2px #999999; 
    color: #FFFFFF; 
    cursor: pointer; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    -ms-text-shadow: 0 -1px #099FDF; 
    text-shadow: 0 -1px #099FDF; 
    margin: 4px; 
    height: 28px; 
    width: 85px; 
    vertical-align: central; 
    align-items: center; 
    text-decoration: none; 
    font: menu; 
    display: inline-block; 
    /*padding: 6px 0 5px 18px;*/ 
} 

它看起來像我想要的,但如何在水平和垂直居中錨標籤內的文本?

+1

垂直居中可以使用行高來完成。並使用文本對齊方式進行橫向排列。 –

+0

僅供參考:「align-items」對大多數網頁瀏覽器來說都不是真實的東西。此外,它僅適用於顯示器的容器:flex或display:inline-flex,然後僅用於阻止所述容器內的元素,而不是文本本身。 – mellowfish

回答

15

添加

text-align: center; 
line-height: 28px; 

工作演示:http://jsfiddle.net/3SE8L/2/

+0

看起來不錯,我可以問問什麼是線路高度,你在哪裏取28號? :) –

+0

它設置多高的簡單文本行應該是。我將它設置爲28,因爲這是您設置爲元素「高度」的值。它使您的行填充整個空間並自動使內容垂直居中。 – MarcinJuraszek

+0

@ArsenMkrt line-height是元素中每行文本的高度,包括行首和行首的高度。對於單行文本,如果將其設置爲容器高度,則會將文本居中。 – mellowfish

1

只需text-align: center;在您現有的類。

+0

不錯,但它只設置水平 –

+0

啊,我錯過了「和垂直」在你的問題。自動執行這個過程非常麻煩。 – mellowfish

1

要水平,並在中間垂直對齊的中心你的文字,試試這個:

CSS:Example Fiddle

.details-button{ 
    //your existing styles 
    //height: 28px; <-- remove this entry 

    text-align: center; 
    padding: 6px 0; 
} 
+0

填充製作按鈕更大 –

+0

@ArsenMkrt,也許但你可以編輯填充到你想要的2px 3px等等,或者使用像'.75em'這樣的EMs等等。 – badAdviceGuy

+0

好吧,但是,但是我希望我的按鈕具有28像素的高度......或者需要通過填充刪除高度和控制高度......感謝但另一種方式如何做到這一點 –

2

首先,刪除這個樣式聲明;它是無效的標記:

vertical-align: central; 

接下來,添加這個水平居中文本:

text-align: center; 

最後,讓你的身高汽車和代替的line-height聲明,設置填充的味道:

height:auto; 
padding:3px 0; 

這應該做到這一點!一定要刪除無效的聲明,因爲它可能會導致您的CSS在某些瀏覽器中中斷。

如果有幫助,請投票給我!謝謝。 :)

+1

是的,這有助於!謝謝 :) –