Центр div между двумя другими div

0

У меня есть два div align на двух сторонах моей страницы, и теперь я хочу, чтобы div между ними выровнялся по центру.

здесь FIDDLE Я хочу центра Blue Div.

HTML:

<div class="lateral_div" style="float: left"></div>
<div class="center_div" ></div>
<div class="lateral_div" style="float: right"></div>

CSS:

.lateral_div {
    width: 80px;
    height: 100px;
    background-color: red;
    margin: 0 10px;
}

.center_div {
    width: 200px;
    height: 160px;
    background-color: blue;
    float: left;
}
Теги:

4 ответа

1
Лучший ответ

Вам нужно изменить свою разметку на это:

<div class="lateral_div" style="float: left"></div>
<div class="lateral_div" style="float: right"></div>
<div class="center_div"></div>

А затем не плавайте средний элемент и применяйте margin: 0 auto:

.center_div {
  width: 200px;
  height: 160px;
  margin: 0 auto;
  background-color: blue;
}

Демо: http://jsfiddle.net/nxHet/3

Поделиться
  • 0
    кажется, работает, спасибо человек. даже если я не хочу менять свою разметку.
3

Вам нужно добавить text-align:center к вашему body (или другому родительскому элементу), чтобы центрировать встроенные элементы, затем развернуть центрированный div и дать ему display:inline-block

Демо-скрипт

Пересмотренный CSS

body {
    text-align:center;
}
.lateral_div {
    width: 80px;
    height: 100px;
    background-color: red;
    margin: 0 10px;
}
.center_div {
    width: 200px;
    height: 160px;
    background-color: blue;
    display:inline-block;
}
Поделиться
  • 0
    у меня есть много div в моем родительском элементе, и я хочу центрировать только один ... этот код не работал.
  • 0
    @Youssef - вам нужно предоставить достаточно деталей в своем вопросе, чтобы те, кто отвечает, отвечали на любые вопросы, в противном случае вы получите только ответы на конкретное содержание вашего вопроса. Можете ли вы добавить дополнительную информацию, чтобы мы могли лучше видеть ситуацию?
Показать ещё 2 комментария
0

Поместите все div внутри другого div и используйте экран свойств стиля CSS: inline-block; он решит вашу проблему

HTML:

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

CSS:

#container{
 width:100%;
 text-align:center;
}
#left{
 float:left;
 width:100px;
}
#right{
 float:right;
 width:100px;
}
#center{
 margin:0 auto;
 width:100px;
 display: inline-block;
}

Удачи.

Поделиться
-1

margin: 0 auto использования margin: 0 auto для центра div

Поделиться
  • 0
    это не работает человек.
  • 0
    это должно работать, если у вас есть ширина, определенная в родительском контейнере, и она не имеет плавающего значения. Я редактировал скрипку SW4: jsfiddle.net/nxHet/4

Ещё вопросы

Сообщество Overcoder
Наверх
Меню