web-dev-qa-db-fra.com

Comment centrer deux div flottant côte à côte

J'ai écrit le code HTML suivant en essayant de centrer deux div l'un à côté de l'autre.

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
    <div style='float:left;'>
    Lorem ipsum<br />
    dolor sit amet
    </div>
</div>

Cependant, le code que j'ai écrit entraîne que les deux div flottent complètement à gauche. Ce que cela fait correctement, c'est de faire flotter les deux div côte à côte.

Que dois-je changer pour centrer les deux div côte à côte?

htmlcsscss-float
34
Daniel Allen Langdon

Vous devrez définir automatiquement la marge et probablement une largeur spécifique à votre div wrapper

<div id="wrapper"></div>

Dans votre CSS:

#wrapper {
    width: 70%;
    margin: 0 auto;
}
29
Daff

À la place d'utiliser float: left, utilisation display: inline-block:

<div id='wrapper' style='text-align: center;'>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet,<br />
        consectetur adipisicing elit
    </div>
    <div style='display: inline-block; vertical-align: top;'>
        Lorem ipsum<br />
        dolor sit amet
    </div>
</div>

Le haut de chaque div intérieur est maintenu aligné en utilisant vertical-align: top.

Exemple: http://jsfiddle.net/hCV8f/1/

34
jason_ruz

Essaye ça:

<div id='wrapper' style='text-align:center;'>
    <div style='float:left;background-color:red;width:50%'>
        Lorem ipsum<br />dolor sit amet
    </div>
    <div style='float:right;background-color:blue;width:50%'>
         Lorem ipsum<br />dolor sit amet
    </div>
</div>

http://jsfiddle.net/JDAyt/

6
Steve Wellens

Connaissez-vous la largeur des deux div à l'avance? Si oui, vous pouvez simplement faire quelque chose comme

<div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>
3
Jacob

Pour le div gauche, définissez la marge gauche. Pour la bonne div, réglez la droite. Comme ça:

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

Cela les place dos à dos au centre de l'écran.

0
corpico

Ci-dessous a travaillé pour moi

<div id='wrapper'>
    <div class='inner'>
        content 1
    </div>
    <div class='inner'>
        content 2
    </div>
</div>

CSS:

.wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}
0
Anand

Le code ci-dessous fonctionne correctement avec Zebra GC420d Imprimante:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
    #div { min-height: 100%; }
    </style>
    </head>
    <body>
    <div style="border: 0px solid red;">
    <table border="0" width="100%" align="center">
    <tr>
    <td style="text-align: center;">
    <?php
    echo $name;
    ?>
    </td>
    </tr>
    <tr><td></td></tr>
    <tr>
    <td style="text-align: center;">
    <?php
    echo 'https://goo.gl/2QvRXf';
    ?>
    </td>
    </tr>

    </table>
    </div>

    </body>
    </html>

J'espère que ça aide !

0
Aditya P Bhatt