Центрирование div между тем, которое плавало справа, и одним, которое плавало слева

У меня есть страница, в которой заголовок состоит из трех divs - один, который перемещается влево, тот, который перемещается вправо, и тот, который находится между ними. Я хотел бы, чтобы центральный центральный центр был центрирован, но, к сожалению, float: center не существует, и я не могу просто поместить его влево и добавить отступы, поскольку это должно измениться в зависимости от размера окна.

Есть ли что-то простое, что я не замечаю? Или как я могу это сделать?

Обновление:
Кроме того, я хотел бы найти способ центрирования этого среднего div в пространстве между divs, если это выглядит лучше.

Ответы

Ответ 1

Если у вас есть два плавающих div, вы знаете поля. Проблема в том, что div float:right должен быть помещен перед средним div. Так что в основном у вас будет:

left-floated | правоплавающие | по центру

Теперь о границах: обычно вы можете просто использовать margin:0 auto, правильно? Проблема в том, что прямо сейчас вы знаете значения полей: плавающие divs! Поэтому вам просто нужно использовать:

margin:0 right-floated-width 0 left-floated-width

Это должно работать.

Через годы редактирование

Между тем в городе появилась новая игрушка: flexbox. Поддержка довольно хорошая (т.е. Если вам не нужна поддержка ниже IE 10), а простота использования - над плавающей точкой.

Здесь вы можете увидеть очень хорошее руководство flexbox здесь. Пример, который вам нужен, - это здесь.

Ответ 2

Действительно, важная часть состоит в том, что центрированный div появляется после левого и правого divs в разметке. Проверьте этот пример, он использует margin-left: auto и margin-right: auto в центрированном div, что приводит к его центрированию.

<html>
<head>
    <style type="text/css">
        #left
        {
            float: left;
            border: solid 1px red;
        }

        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px red;
        }

        #right
        {
            float: right;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div id="left">
        left
    </div>

    <div id="right">
        right
    </div>

    <div id="mid">
        mid
    </div>
</body>
</html>

Здесь JS Bin для проверки: http://jsbin.com/agewes/1/edit

Ответ 3

Элемент с центрированным контентом должен быть указан после обоих перемещаемых элементов. После этого просто установите средний элемент в text-align: center. Текст в центрированном элементе будет сжиматься между поплавками.

Смотрите здесь: http://jsfiddle.net/calvintennant/wjjeR/

Ответ 4

Обычно вы можете использовать flexbox вместо floats:

https://jsfiddle.net/h0zaf4Lp/

HTML:

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

CSS

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}

Ответ 5

Попробуйте это (не забудьте использовать лучшие имена классов):

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

Центральный div будет располагаться между двумя поплавками.

Если вы хотите создать желоб между этим центрированным div и двумя поплавками, тогда используйте margin на поплавках, а не на центральном div.

Из-за "масштабирования" CSS не будет проверяться, но этот макет будет работать в IE 5.5 и 6.

Обратите внимание на то, что порядок источника важен здесь: два поплавка должны быть первыми, а затем ваш "центрированный" div.

Ответ 6

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

Для контейнера: position: relative
Для среднего div: position: absolute; left: [containerWidth - middle-width / 2]

Надеюсь, у вас есть идея.

Ответ 7

Простое решение без необходимости менять порядок div (иногда мы не можем этого сделать) может быть абсолютным позиционированием для центра div следующим образом:

.container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

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