Два блока Div в одной строке и выравнивание по центру их обоих

Question

Два блока Div в одной строке и выравнивание по центру их обоих

У меня есть два таких 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 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) также был выровнен по центру.

25

css html center

задан leymannx 25 August 2015 в 15:06

6 ответов

Другие вопросы по тегам:

css html center

Похожие вопросы:

score 2 · Answer 1

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

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

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

score 0 · Answer 2

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

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

на div, которые внутри set css : flex:1 1 auto;

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

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

score 1 · Answer 3

Выровняйте по центру, используя 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>

score 0 · Answer 4

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

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

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

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

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

score 1 · Answer 5

Я бы проголосовал против 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;

score 10 · Answer 6

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