Question

我有这个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>

In＆lt;按钮＆gt;和＆lt;输入＆gt;，文本是按钮的对齐中心但是在＆lt; a＆gt;和＆lt; div＆gt ;,文本显示在按钮的顶部。我认为＆lt;按钮＆gt;和＆lt;输入＆gt;继承了一些属性，因此它们在按钮中间对齐文本。

我看到了这个

我想让所有按钮对齐中间的文字。

班级“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;
 }

有什么想法吗？

Answer 1

要将这些元素的文本垂直居中，只需将元素文本的line-height设置为等于元素的height，并将box-sizing设置为{ {1}}（为了使所有元素的border-box相同：

height

JS Fiddle demo

显然，如果文本换行到第二行，这确实会引起问题。

Answer 2

请删除来自btn类的padding:4px 12px; 并设置 line-height: 根据您的要求，文本应该放在框的中心。

Answer 3

我认为使用a元素的设置填充创建高度。

Answer 4

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

希望这是有帮助的

Answer 5

应该是，简单地说：line-height：0.25em;

Answer 6

为.btn类添加display:table-cell;。

喜欢

.btn{display:table-cell;}

这将为具有类.btn的Div以及a元素创建垂直对齐方式。希望这会有所帮助。

Answer 7

删除此内容：height: 80px;

你的填充：padding: 4px 12px;

删除高度填充后必须为〜padding: 30px 12px;

您必须将填充设置为正确（基于文本高度）。

Answer 8

vertical-align:center;

使用它，它将起作用

如何在自定义按钮中对齐中心文字？

8 个答案: