How align center text in custom buttons?

Question

I have this 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.

I see this

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

The class "btn" is this

.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?

Possible duplicate of [Button's text vertical align](http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) — Pensierinmusica, Jul 26 '16 at 09:24

score 21 · Accepted Answer · answered May 21 '13 at 10:21

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

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

JS Fiddle demo.

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

score 1 · Answer 2 · edited Jul 01 '21 at 10:25

1

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

edited Jul 01 '21 at 10:25

light1

184
1
15

answered May 21 '13 at 10:31

Saurav Das

11
1

score 0 · Answer 3 · answered May 21 '13 at 10:32

0

I think create height with setting padding for a element.

answered May 21 '13 at 10:32

Chalist

3,160
5
39
68

score 0 · Answer 4 · edited Nov 02 '15 at 23:15

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

Hope this is helpful

edited Nov 02 '15 at 23:15

craned

2,991
2
34
38

answered May 21 '13 at 10:49

Abhinav Jayaram

156
1
4

score 0 · Answer 5 · answered Apr 12 '16 at 13:24

0

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

answered Apr 12 '16 at 13:24

mrcat

2,021
2
11
6

score 0 · Answer 6 · answered May 27 '22 at 17:21

0

I use such approach:

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

It useful when text in button has 2 raws. line-heigt will broke 2 raws

answered May 27 '22 at 17:21

Jiml

377
3
9

score 0 · Answer 7 · answered May 27 '22 at 17:32

You can use display: flex; to make your work easier. Just look at the code below.

#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>

score -1 · Answer 8 · answered May 21 '13 at 10:24

-1

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

like

.btn{display:table-cell;}

This will create the vertical alignment for the Div as well as a elements having the class .btn. Hope this helps.

answered May 21 '13 at 10:24

Nitesh

15,425
4
48
60

IE7 or lower? The tag button itself is not supported for IE7 or lower. Probably you forgot to mention that. Right? - @chalist – Nitesh May 21 '13 at 10:33
1

You also ignored an important point of the snippet. i.e the title tag. It has mentioned HTML5 App. HTML5. You can write to the user who has asked this and say that it is "not supported in IE7 or lower". Right? - @chalist – Nitesh May 21 '13 at 10:36

score -1 · Answer 9 · answered May 21 '13 at 10:31

-1

Remove this : height: 80px;

Your padding : padding: 4px 12px;

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

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

answered May 21 '13 at 10:31

Ifch0o1

900
1
14
32

score -3 · Answer 10 · edited Oct 22 '13 at 08:08

-3

vertical-align:center;

use that and it will work

edited Oct 22 '13 at 08:08

Kamil Budziewski

22,699
14
85
105

answered Oct 11 '13 at 08:20

Nihal Sahu

49
7

How align center text in custom buttons?

10 Answers10

Linked