web-dev-qa-db-fra.com

Comment centrer les boutons (verticalement et horizontalement) dans une balise div?

J'essaie de déterminer comment centrer (verticalement et horizontalement) les boutons dans une balise div.

Étant donné les CSS suivants:

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;
}

J'aimerais que les boutons de ce balisage soient centrés. Comment puis-je modifier le CSS pour y parvenir?

<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>
csshtmlcenter
20
jsteele

définissez les marges autour de l'objet pour occuper le reste de l'espace. Si vous souhaitez centrer une div 50px par 50px dans une div 100px par 100px, vous devez définir une marge de 25px autour de la div 50px.

17
Antony Carthy

Définissez les éléments à l'intérieur de votre div comme suit:

margin: 0px auto 0px auto; text-align: center;

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

** Je viens de faire un exemple en ligne pour vous montrer ce que je voulais dire.

9
jgallant

Centrage vertical en CSS

Vous pouvez centrer le texte horizontalement en utilisant

text-align: center;
0
rahul