logo标签列表

如何在自定义按钮中使文本居中对齐？

htmlcss
14

我有这个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>
可能是按钮文本垂直对齐的重复问题。 - Pensierinmusica
10个回答
21
为使这些元素的文字垂直居中，只需将元素文本的line-height设置为元素的height，并将box-sizing设置为border-box（以保证所有元素的height相同）。
.btn {
    /* other, unchanged, CSS */
    line-height: 80px; /* <- changed this */
    box-sizing: border-box; /* <- added this */
}

JS Fiddle演示。

很明显，如果文本换行成为第二行，这确实会造成问题。

1
请从.btn类中删除padding:4px 12px;，并根据您的要求设置line-height:，然后文本将出现在框的中心。
0

我使用这样的方法：

.btn {
    display: flex;
    align-items: center;
 }

当按钮中的文本有两行时，它非常有用。行高将会分成两行。

0
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

希望这对你有所帮助。
0

我认为可以通过设置 a 元素的 padding 来创建高度。

0

应该是这样的，简单地写成：line-height: 0.25em;

0

您可以使用 display: flex; 让工作更轻松。只需要查看下面的代码。

#botones {
  display: flex;
  column-gap: 5px;
}
.btn{
  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;
}
#botones a,
#botones div {
  display:flex;
  flex-direction: column;
  justify-content: center;
}
<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>

-1
为 .btn 类添加 display:table-cell;。就像这样：
.btn{display:table-cell;}

这将为具有类名.btn的a元素以及Div创建垂直对齐。

希望这可以帮到你。
IE7或更低版本？标签按钮本身不支持IE7或更低版本。你可能忘了提到这一点。对吧？- @chalist - Nitesh
1
你还忽略了代码片段中一个重要的点，即标题标签。它已经提到了<title>HTML5 App</title>。HTML5。你可以回复这个问题的用户并说它“不支持IE7或更低版本”。对吧？- @chalist - Nitesh
-1

删除这个：height: 80px;

你的内边距：padding: 4px 12px;

在你移除高度后，内边距应该是 ~ padding: 30px 12px;

你必须根据文本高度设置合适的内边距。

-3
vertical-align:center;

使用它，它会工作的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接