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

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

33 голосов
/ 18 марта 2011

Я написал следующий 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 рядом друг с другом?

Ответы [ 7 ]

34 голосов
/ 05 мая 2014

Вместо использования 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/

28 голосов
/ 18 марта 2011

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

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

В вашем CSS: 

#wrapper {
    width: 70%;
    margin: 0 auto;
}
6 голосов
/ 18 марта 2011

Попробуйте это: 

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

3 голосов
/ 18 марта 2011

Знаете ли вы ширину обоих 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>
0 голосов
/ 02 мая 2018

ниже работал у меня 

<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 голосов
/ 04 февраля 2016

Ниже код отлично работает с 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>

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

0 голосов
/ 07 июля 2015

Для левого div, установите левое поле. Для правильного div, установите право. Как это: 

#leftDiv {
    margin-left: auto;
}

#rightDiv {
    margin-right: auto;
}

Это помещает их вплотную в центре экрана.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...