13

私はこの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>

< button > と < input > では、テキストはボタンの中央に配置されますが、 < a > と < div > では、テキストはボタンの上に表示されます。< button > と < input > はいくつかのプロパティを継承しているため、ボタンの中央にテキストを揃えていると思います。

私はこれを見る

写真

そして、すべてのボタンがテキストを中央に揃えるようにします。

クラス「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;
 }

何か案が？

4

8 に答える 8

19

これらの要素のテキストを垂直方向の中央に配置するにline-heightは、要素のテキストの を要素の に等しくheight設定box-sizingし、border-box(heightすべての要素の が同じになるように:

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

JS フィドルのデモ。

テキストが 2 行目に折り返されると、明らかに問題が発生します。

于 2013-05-21T10:21:48.790 に答える
1

padding:4px 12px;を .btn クラスから 削除し、 line-height: 必要に応じて設定すると、テキストがボックスの中央に表示されます。

于 2013-05-21T10:31:00.377 に答える
0

a要素のパディングを設定して高さを作成すると思います。

于 2013-05-21T10:32:30.067 に答える
-1

これを削除します：height: 80px;

あなたのパディング:padding: 4px 12px;

高さのパディングを削除した後は〜でなければなりませんpadding: 30px 12px;

パディングを細かく設定する必要があります (テキストの高さに基づいて)。

于 2013-05-21T10:31:30.833 に答える
-3 
vertical-align:center;

それを使用すると動作します

于 2013-10-11T08:20:43.583 に答える