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

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

<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 бок о бок.

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

источник

2011-03-18 Daniel Allen Langdon

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

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

В вашем CSS:

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

источник

2011-03-18 20:10:42 Daff

Я как бы понимаю, что вы говорите; но почему «маржа» имеет два значения? –

В основном поле может иметь до четырех значений, задающих [верхний, правый, нижний, левый]. С двумя значениями вы устанавливаете край [верхний нижний, левый-правый] (установка влево-вправо, чтобы авто заставляет его центрироваться) только с одним значением, которое вы устанавливаете для каждой стороны. – Daff

У меня была такая же проблема, и я пробовал ваше решение: http://jsfiddle.net/6ARJX/9/ Не работало для меня. Любое предложение? –

Вы знаете ширину обоих 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>

источник

2011-03-18 20:11:14 Jacob

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

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

источник

2011-03-18 20:57:15

+1 для простоты. Значения 'float: left' и' float: right' - это все, что необходимо без дополнительной упаковки и css. – dk123

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

источник

2014-05-04 23:31:21

'display: inline-block' не всегда работает, но его первое, что вам нужно проверить. –

Он будет работать. Просто убедитесь, что содержимое левого и правого div не слишком велико, иначе они упадут один ниже другого. Один пример. Если в правой части много текста, дайте ему фиксированную ширину, чтобы текст был обернут. – dreamerkumar

Для левой DIV установите левое поле. Для правого div установите правильное значение. Например:

#leftDiv { 
    margin-left: auto; 
} 

#rightDiv { 
    margin-right: auto; 
}

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

источник

2015-07-07 18:06:27 corpico

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

Надеется, что это помогает!

источник

2016-02-04 14:26:15

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

ответ

Смежные вопросы