Как центрировать два divs, плавающих рядом друг с другом

Я написал следующий HTML, пытающийся центрировать два div рядом друг с другом.

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

Однако, код, который я написал, приводит к тому, что два div будут перемещаться влево. То, что это делает правильно, - это поместить два div рядом друг с другом.

Что мне нужно изменить, чтобы центрировать два div бок о бок?

Ответы

Ответ 1

Вам необходимо будет автоматически установить маржу и, возможно, определенную ширину для вашей обертки div

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

В вашем CSS:

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

Ответ 2

Вместо float: left используйте 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>

Верхняя часть каждой внутренней div поддерживается выравниванием с помощью vertical-align: top.

Пример: http://jsfiddle.net/hCV8f/1/

Ответ 3

Попробуйте следующее:

<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/

Ответ 4

Знаете ли вы ширину как div заранее? Если это так, вы можете просто сделать что-то вроде

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

Ответ 5

Для левого div установите левое поле. Для правого div установите правильное значение. Вот так:

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

Это вернет их обратно в центр экрана.

Ответ 6

Ниже код отлично работает с Zebra GC420d Принтер:

    <!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>

Надеюсь, что это поможет!