20

div タグのボタンを中央 (垂直方向および水平方向) に配置する方法を決定しようとしています。

次の CSS があるとします。

div.listBoxMoverUserControl
{
    width: 350px;
    height: 175px;
}

div.listBoxMoverUserControl div 
{
    height: 150px;
}

div.listBoxMoverUserControl div select
{
    width: 150px;
    height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1
{
    float: left;
    width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2
{
    float: left;
    width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3
{
    float: left;
    width: 150px;
}

このマークアップのボタンを中央に配置したいと思います。これを実現するために CSS を変更するにはどうすればよいですか?

<div class="listBoxMoverUserControl">
    <div class="listBoxMoverUserControl_column1">
        <label>Test1</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
    <div class="listBoxMoverUserControl_column2">
        <input id="btnMoveRight" type="button" value="->" /> <br />
        <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
    <div class="listBoxMoverUserControl_column3">
        <label>Test2</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
</div>
4

4 に答える 4

17

オブジェクトの周囲にマージンを設定して、残りのスペースを占有します。50px × 50px の div を 100px × 100px の div の中央に配置する場合は、50px の div の周囲に 25px のマージンを設定します。

于 2009-08-18T11:47:39.160 に答える
9

div 内の項目を次のように設定します。

margin: 0px auto 0px auto; テキスト整列: 中央;

<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">

** 私が何を言おうとしているのかを示すために、インラインの例を示しただけです。

于 2009-08-18T11:38:01.363 に答える
0

CSS の垂直センタリング

を使用して、テキストを水平方向に中央揃えできます

text-align: center;
于 2009-08-18T11:42:12.947 に答える