Как центрировать div между двумя другими div?

Question

Я новичок в CSS, и в настоящее время у меня есть правый div и левый div. Я пытаюсь поставить один между ними, и когда я это сделаю, он слегка сдвинет правый div. Вот что я имею в CSS прямо сейчас:

.left { 
 
    height:300px; 
 
    width:200px; 
 
    border:3px solid black; 
 
    float:left; 
 
    border-top-right-radius:15px; 
 
    border-top-left-radius:15px; 
 
    border-bottom-left-radius:15px; 
 
    border-bottom-right-radius:15px; 
 
    background-color:aliceblue; 
 
    margin-bottom:10px; 
 
} 
 

 
.center{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 

 

 
.right{ 
 
    height:300px; 
 
    width:200px; 
 
    border:3px solid black; 
 
    float:right; 
 
    border-top-right-radius:15px; 
 
    border-top-left-radius:15px; 
 
    border-bottom-left-radius:15px; 
 
    border-bottom-right-radius:15px; 
 
    background-color:aliceblue; 
 
    margin-bottom:10px; 
 
    
 
}

<div class="left"> 
 
    </div> 
 

 
<div class="center"> 
 
    </div> 
 
    
 
    <div class="right"> 
 
    </div> 
 

Так что я спрашиваю, как я могу держать центр DIV в середине, и держать обе левые и правые дивы в их место и не двигаться вверх/вниз?

Answer 1

Если вы поплыли слева от среднего div и дали маржу, оставленную на тот же средний div, она не всегда посередине, когда размер экрана изменяется. Таким образом, вы должны установить абсолютную абсолютную позицию и сделать ее всегда посередине для всех размеров экрана. Вы можете сделать все, чтобы сделать центр, установив абсолютное положение и давая левый: 0; право: 0; Маржа: авто; css свойства. Итак, сделайте центральную позицию div абсолютной и добавьте влево: 0px; право: 0px; css. Добавьте новые стили для класса .center.

.left { 
    height:300px; 
    width:200px; 
    border:3px solid black; 
    float:left; 
    border-top-right-radius:15px; 
    border-top-left-radius:15px; 
    border-bottom-left-radius:15px; 
    border-bottom-right-radius:15px; 
    background-color:aliceblue; 
    margin-bottom:10px; 
} 

.center{ 
    height:100px; 
    width:100px; 
    background-color:blue; 
    margin-left:auto; 
    margin-right:auto; 
    position:absolute; 
    left:0; 
    right:0; 
} 


.right{ 
    height:300px; 
    width:200px; 
    border:3px solid black; 
    float:right; 
    border-top-right-radius:15px; 
    border-top-left-radius:15px; 
    border-bottom-left-radius:15px; 
    border-bottom-right-radius:15px; 
    background-color:aliceblue; 
    margin-bottom:10px; 

} 

<div class="left"> 
    </div> 

<div class="center"> 
    </div> 

    <div class="right"> 
    </div> 

Answer 2

Вы можете изменить порядок дивы:

.left { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 3px solid black; 
 
    float: left; 
 
    border-top-right-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    background-color: aliceblue; 
 
    margin-bottom: 10px; 
 
} 
 
.center { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.right { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 3px solid black; 
 
    float: right; 
 
    border-top-right-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    background-color: aliceblue; 
 
    margin-bottom: 10px; 
 
}

<div class="left"> 
 
</div> 
 
<div class="right"> 
 
</div> 
 
<div class="center"> 
 
</div>

От W3C's Visual Formatting Model:

Содержание [которое приходит после перемещаемого элемента] течет вниз по правой стороне левого плавающего ящика и вниз по левой стороне прямоугольной коробки.

Так как вы хотите, чтобы центр DIV быть справа от левого всплывающего DIV и слева от правого всплывающего DIV, он должен быть помещен после того, как дивов в HTML.

Или держать дивы, как они есть, и настроить верхний край на правой DIV:

.left { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 3px solid black; 
 
    float: left; 
 
    border-top-right-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    background-color: aliceblue; 
 
    margin-bottom: 10px; 
 
} 
 
.center { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.right { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 3px solid black; 
 
    float: right; 
 
    border-top-right-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    background-color: aliceblue; 
 
    margin-bottom: 10px; 
 
    margin-top: -100px; 
 
}

<div class="left"> 
 
</div> 
 

 
<div class="center"> 
 
</div> 
 

 
<div class="right"> 
 
</div>

отрицательное верхнее поле смещения эффекта поплавка толкающей коробку.

Answer 3

Вы можете также добавить отрицательные поля для центрирования DIV.

.left { 
 
    height:300px; 
 
    width:200px; 
 
    border:3px solid black; 
 
    float:left; 
 
    border-top-right-radius:15px; 
 
    border-top-left-radius:15px; 
 
    border-bottom-left-radius:15px; 
 
    border-bottom-right-radius:15px; 
 
    background-color:aliceblue; 
 
    margin-bottom:10px; 
 
} 
 

 
.center{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
margin-bottom: -100px; 
 
} 
 

 

 
.right{ 
 
    height:300px; 
 
    width:200px; 
 
    border:3px solid black; 
 
    float:right; 
 
    border-top-right-radius:15px; 
 
    border-top-left-radius:15px; 
 
    border-bottom-left-radius:15px; 
 
    border-bottom-right-radius:15px; 
 
    background-color:aliceblue; 
 
    margin-bottom:10px; 
 
    
 
}

<div class="left"> 
 
</div> 
 

 
<div class="center"> 
 
</div> 
 

 
<div class="right"> 
 
</div>

Answer 4

Там не хватает данных о вашей желаемого результата здесь, но почему бы не всплывают все три дивы налево?

Обновление: Вы можете использовать flexbox в зависимости от поддержки браузера. Поместите свои divs в контейнер и настройте дисплей контейнера.

.container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }