Html 如何在自定义按钮中对齐中心文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16667536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:37:37  来源:igfitidea点击:

How align center text in custom buttons?

htmlcss

提问by Bae

I have this html

我有这个 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 < button > and < input >, text is align center of the button but in < a > and < div >, text is shown top of the button. I think < button > and < input > inherit some property and so they align text in the middle of button.

在 < button > 和 < input > 中,文本对齐按钮的中心,但在 < a > 和 < div > 中,文本显示在按钮的顶部。我认为 < button > 和 < input > 继承了一些属性,因此它们在按钮中间对齐文本。

I see this

我看到这个

pic

图片

and i want that all buttons align text in the middle.

我希望所有按钮都在中间对齐文本。

The class "btn" is this

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

Any idea?

任何的想法?

回答by David says reinstate Monica

To vertically-centre the text of these elements, simply set the line-heightof the element's text equal to the heightof the element, and set box-sizingto border-box(in order that the heightof all elements are the same:

要使这些元素的文本垂直居中,只需将元素文本的 设置为line-height等于height元素的 ,并设置box-sizingborder-box(以便height所有元素的 都相同:

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

JS Fiddle demo.

JS小提琴演示

Obviously this does cause issues, should the text wrap to a second line.

显然,这确实会导致问题,如果文本换行到第二行。

回答by mrcat

it should be, simply: line-height: 0.25em;

它应该是,简单地: line-height: 0.25em;

回答by Chalist

I think create height with setting padding for aelement.

我认为通过为a元素设置填充来创建高度。

回答by Abhinav Jayaram

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

Hope this is helpful

希望这有帮助

回答by Saurav Das

Please removed the padding:4px 12px;from the btn class and set the line-height:as per your requirement then the text should come in the center of the box.

padding:4px 12px;从 btn 类中删除 并line-height:根据您的要求设置, 然后文本应位于框的中心。

回答by Ifch0o1

Remove this : height: 80px;

删除这个: height: 80px;

Your padding : padding: 4px 12px;

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

After you remove the height padding must be ~ padding: 30px 12px;

去掉高度填充后一定要~ padding: 30px 12px;

You must set the padding fine (based on your text height).

您必须很好地设置填充(根据您的文本高度)。

回答by Nitesh

Add a display:table-cell;for the .btn class.

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

like

喜欢

.btn{display:table-cell;}

This will create the vertical alignment for the Divas well as aelements having the class .btn. Hope this helps.

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

回答by Nihal Sahu

vertical-align:center;

use that and it will work

使用它,它会起作用