центрирование div между плавающим направо и левым - PullRequest
Новая
       6

центрирование div между плавающим направо и левым

56 голосов
/ 04 июля 2010

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

Есть что-то простое, что я пропускаю?Или как мне сделать такую ​​вещь?

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

Ответы [ 7 ]

59 голосов
/ 04 июля 2010

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

левостороннее |правосторонний |по центру

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

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

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

Годы спустя отредактировать

Тем временем в городе появляется новая игрушка:Flexbox.Поддержка довольно хорошая (т. Е. Если вам не нужна поддержка ниже, чем IE 10), а простота использования выше, чем поплавки.

Вы можете увидеть очень хорошее руководство по flexbox здесь .Вот пример, который вам нужен: здесь .

42 голосов
/ 04 июля 2010

Действительно, важная часть состоит в том, что центрированный div следует после левого и правого div в разметке. Посмотрите на этот пример, он использует 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 для проверки: http://jsbin.com/agewes/1/edit

6 голосов
/ 06 августа 2016

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

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;
}
4 голосов
/ 22 августа 2013

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

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

2 голосов
/ 04 июля 2010

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

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

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

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

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

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

Простое решение без необходимости изменять порядок 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>
https://jsfiddle.net/Helioz/nj548y0g/
0 голосов
/ 14 октября 2013

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

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

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

...