Два Divs в одной и той же строке и центре выравнивают их оба

У меня есть два divs, подобных этому

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

Я хочу, чтобы они отображались в одной строке, поэтому я использовал float:left.

Я хочу, чтобы оба они были в центре страницы, поэтому я попытался обернуть их другим div, подобным этому

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

Но это не сработает. Если я изменил код на этот

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

то он идет в центр, но горизонтальная полоса прокрутки есть, и кажется, что она тоже не центрирована.

Не могли бы вы любезно предложить мне, как я могу это достичь? Спасибо.

Изменить: я хочу, чтобы внутренний div (Div 1 и Div 2) был также центрирован.

Ответы

Ответ 1

Вы можете сделать это

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

http://jsfiddle.net/jasongennaro/MZrym/

  • оберните его в div с помощью text-align:center;
  • дайте innder div a display:inline-block; вместо float

Лучше также поставить этот CSS в таблицу стилей.

Ответ 2

Может ли это сделать для вас? Проверьте мой JSFiddle

И код:

HTML

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

CSS

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}

Ответ 3

оба плавающих divs должны иметь ширину!

установите 50% ширины для обоих, и он работает.

BTW, внешний div, с его margin: 0 auto будет только центрировать себя не внутри.

Ответ 4

Я бы проголосовал против display: inline-block, поскольку он не поддерживается в браузерах, IE < 8.

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

РЕДАКТИРОВАТЬ: Если промежуток между ячейками не требуется, просто измените как .left, так и .right на использование float: left;

Ответ 5

Лучший способ до сих пор:

  • Если вы показываете отображение: встроенный блок; к внутренним divs, тогда дочерние элементы внутренних divs также получат это свойство и нарушают выравнивание внутренних div.

  • Лучше всего использовать два разных класса для внутренних divs с шириной, маркой и float.

Лучший способ до сих пор:

Используйте flexbox.

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 6

Пожалуйста, взгляните на flex, это поможет вам сделать все правильно,

в главном наборе div css display :flex

div, что внутри set css: flex:1 1 auto;

прилагается ссылка jsfiddle в качестве примера:)

https://jsfiddle.net/hodca/v1uLsxbg/