如何對齊自定義按鈕中的中心文字？

我有這樣的HTML如何對齊自定義按鈕中的中心文字？

<head> 
<title>HTML5 App</title> 

<link rel="stylesheet" type="text/css" href="css/custom.css"> 
<link rel="stylesheet" type="text/css" href="css/buttons.css"> 

</head> 

<body> 
<!--Estructura --> 


<div id="botones"> 
    <button class="btn" data-am-type="button">Soy un &lt;button&gt;</button> 
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a> 
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</div> 
    <input class="btn" type="button" value="Soy un <input>"> 
</div> 

</body>

在<按鈕>和<輸入>，文本是按鈕的對準中心但在<一個>和< DIV>，文本顯示按鈕的頂部。我認爲< button>和< input>繼承了一些屬性，因此它們將按鈕中間的文本對齊。

我看到這個

，我希望所有的按鈕排列在中間文本。

類「BTN」這是

.btn{ 
display: inline-block; 
padding: 4px 12px; /* Padding por defecto */ 
font-size: 16px; /* Tamaño fuente por defecto */ 
line-height: 20px; /* Tamaño de linea */ 
text-align: center; 
vertical-align: middle; 

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 

cursor: pointer; 
height: 80px; 
background-color: #f5f5f5; /* por si no se ve el gradiente, aunque si lo pruebo en Chrome nunca deberia verse este color*/ 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 

border: 1px solid #cccccc; 
-webkit-border-radius: 4px; 
}

任何想法？

來源

2013-05-21 Bae

可能重複[Button的文本垂直對齊]（http://stackoverflow.com/questions/15487408/buttons-text-vertical-align） – Pensierinmusica

要垂直中心這些元素的文本，簡單地將元素的文本等於所述元件的height的line-height，並設置box-sizing到border-box（爲了使所有元素的height是相同的：

.btn { 
    /* other, unchanged, CSS */ 
    line-height: 80px; /* <- changed this */ 
    box-sizing: border-box; /* <- added this */ 
}

JS Fiddle demo。

顯然，這確實會引起問題，應該文本換行到第二行。

來源

2013-05-21 10:21:48

-1

爲.btn類添加display:table-cell;。

像

.btn{display:table-cell;}

這將創建爲Div垂直取向以及具有類.btn a元件。希望這有助於。

來源

2013-05-21 10:24:07 Nitesh

點：不支持IE7或更低版本 – Chalist

IE7或更低版本？標籤按鈕本身不支持IE7或更低版本。可能你忘了提到這一點。對？ - @chalist – Nitesh

你也忽略了片段的重要一點。即標題標籤。它提到了 HTML5 App。 HTML5。你可以寫信給已經問過這個問題的用戶，並說它「在IE7或更低版本中不支持」。對？ - @chalist – Nitesh

請移除了BTN類的 padding:4px 12px;並設置 line-height: 按照您的要求，則文本應走在了盒子的中心。

來源

2013-05-21 10:31:00

-1

刪除此：height: 80px;

您填充：padding: 4px 12px;

刪除後高度填充必須〜padding: 30px 12px;

您必須設置填充罰款（基於文本的高度）。

來源

2013-05-21 10:31:30 Ifch0o1

我認爲用設置填充爲a元素創建高度。

來源

2013-05-21 10:32:30 Chalist

border: none; 
outline: 0; 
cursor: pointer; 
text-decoration: none; 
overflow: visible; 
background: none; 
padding:0 16px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
color: #222

希望這是有益

來源

2013-05-21 10:49:48

-3

vertical-align:center;

使用的是，它會工作

來源

2013-10-11 08:20:43

它應該是，簡單地說：行高度：0.25em;

來源

2016-04-12 13:24:24 mrcat

如何對齊自定義按鈕中的中心文字？

回答

相關問題