Bae Bae - 1 year ago 76
HTML Question

How align center text in custom buttons?

I have this html

<title>HTML5 App</title>

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


<!--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>">


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

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?

Answer Source

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.