Два Div в одном ряду и в центре выравнивают их обоих - PullRequest
Новая
       4

Два Div в одном ряду и в центре выравнивают их обоих

25 голосов
/ 02 августа 2011

У меня есть два типа div 

<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) был также выровнен по центру.

Ответы [ 7 ]

56 голосов
/ 02 августа 2011

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

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

  1. обернуть его в div с помощью text-align:center;
  2. , чтобы указать номер div sa display:inline-block; вместо float

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

10 голосов
/ 02 августа 2011

Может ли это сделать для вас? Проверьте мой 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;
}
2 голосов
/ 02 августа 2011

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

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

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

1 голос
/ 02 июля 2018

Выровняйте по центру, используя display: inline-block и text-align: center. 

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Выровняйте по центру, используя display: flex и justify-content: center

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Выровняйте по центру по вертикали и горизонтали, используя display: flex, justify-content: center и align-items:center. 

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}
<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>
1 голос
/ 02 августа 2011

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

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

0 голосов
/ 29 сентября 2016

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

на главном наборе div.: flex:1 1 auto;

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

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

0 голосов
/ 25 ноября 2014

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

  1. Если вы укажете display: inline-block;к внутренним элементам div, то дочерние элементы внутренних элементов div также получат это свойство и будут мешать выравниванию внутренних элементов div.

  2. Лучше использовать два разных класса для внутренних элементов div с width, margin и float..

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

Использовать flexbox.

http://css -tricks.com / snippets / css / a-руководство к Flexbox /

...