0

ボタンをdivに垂直に配置したい。'display：table-cell'と'vertical-align：middle'を使用しています。問題は、含まれているdivが元の幅を維持するのではなく、両方のボタンのサイズに縮小されていることです。

jsFiddle：私のテーブルセルデモ

html：

<div class="container">
<div class="bar">
<input type="button" value="Click Me">
<input type="button" value="Click Me">
</div>
<div>​

css：

.container{ width: 600px;}
.bar{
background-color: blue;
    //width: 100%;
    height: 100px;
    display:table-cell;

    vertical-align: middle;
}.bar input{height: 60px;}
​
4

3 に答える 3

1

display:table-rowコンテナーに適用できます。

ソース: http://jsfiddle.net/Ktnq9/
デモ: http://jsfiddle.net/Ktnq9/show

.container {
    width: 600px;
    table-layout: fixed;
    display: table-row;
}
于 2013-01-02T20:05:13.963 に答える
1

に追加display: table;し.containerます。

于 2013-01-02T20:07:19.810 に答える
0

変数の高さを持っているコンテナまたはコンテナに関心がない場合は、コンテナに同じサイズのマージンを追加し、テーブルセルの参照を削除することでこれを実現することもできます。

.bar input{margin: 30px 0;}

http://jsfiddle.net/8WVCA/11/

于 2013-01-02T20:53:43.800 に答える