Menu
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 <button></button>
<a class="btn" data-am-type="button">Soy un <a></a>
<div class="btn" data-am-type="button">Soy un <div></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?
200
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.
180
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
