У меня проблема, когда я пытаюсь центрировать блок "продукты", потому что я не знаю заранее ширину блока. У кого-нибудь есть решение?
Обновление: у меня проблема в том, что я не знаю, сколько продуктов я буду отображать, у меня может быть 1, 2 или 3 продукта, я могу отцентрировать их, если бы это было фиксированное число, так как я знал бы ширину родительского элемента. div, я просто не знаю, как это сделать, когда контент динамический.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Ответы:
Обновление 27 февраля 2015: мой оригинальный ответ продолжает получать голоса, но теперь я обычно использую подход @ bobince вместо этого.
Мой оригинальный пост в исторических целях:
Возможно, вы захотите попробовать этот подход.
Вот соответствующий стиль:
JSFiddle
Идея заключается в том, что вы содержите содержимое, которое хотите центрировать, в двух элементах: внешнем и внутреннем. Вы перемещаете оба элемента, чтобы их ширина автоматически уменьшалась в соответствии с вашим содержимым. Затем вы относительно позиционируете внешний div с правым краем в центре контейнера. Наконец, вы относительно позиционируете внутренний div в противоположном направлении на половину его собственной ширины (на самом деле ширина внешнего div, но они одинаковы). В конечном итоге это центрирует контент в любом контейнере, в котором он находится.
Вам может понадобиться этот пустой div в конце, если вы зависите от содержимого «product» для определения высоты для «product_container».
источник
overflow:hidden
для DIV будет перекрывать другое близлежащее содержимое справа от него. Любые ссылки или кнопки справа не будут работать. Попробуйте цвет фона, чтобы понять необходимость . Это было предложенное редактирование Сицилом Томасом.product_container
outer-center
outer-center
outer-center
overflow :hidden
Элемент с «display: block» (так как div по умолчанию) имеет ширину, определяемую шириной его контейнера. Вы не можете сделать ширину блока зависимой от ширины его содержимого (сжать, чтобы соответствовать).
(За исключением блоков, которые являются «float: left / right» в CSS 2.1, но для центрирования это бесполезно.)
Вы можете установить для свойства display значение inline-block, чтобы превратить блок в сжатый объект, которым можно управлять с помощью свойства text-align его родителя, но поддержка браузера не является точной. В большинстве случаев это можно сделать с помощью хаков (например, см. -Moz-inline-stack), если вы хотите пойти по этому пути.
Другой путь - таблицы. Это может быть необходимо, когда у вас есть столбцы, ширина которых действительно не может быть известна заранее. Я не могу точно сказать, что вы пытаетесь сделать из примера кода - там нет ничего очевидного, что потребовало бы блок с усадкой - но список продуктов можно было бы считать табличным.
[PS. никогда не используйте «pt» для размеров шрифта в сети. «px» более надежен, если вам действительно нужен текст фиксированного размера, в противном случае относительные единицы, такие как «%», лучше. И «ясно: CCC оба» - опечатка?]
JSFiddle
источник
display: inline-block
не поддерживается в IE7 и более ранних версиях FirefoxБольшинство браузеров поддерживают
display: table;
правило CSS. Это хороший прием для центрирования элемента div в контейнере без добавления дополнительного HTML или применения стилей к контейнеру (например,text-align: center;
который бы центрировал весь другой встроенный контент в контейнере), сохраняя при этом динамическую ширину для содержащегося элемента div:HTML:
CSS:
Показать фрагмент кода
Обновление (2015-03-09):
Правильный способ сделать это сегодня - использовать правила flexbox. Поддержка браузеров является немного более ограниченной ( поддержка CSS таблицы против поддержки Flexbox ) , но этот метод позволяет также много других вещей, и является специализированным правилом CSS для этого типа поведения:
HTML:
CSS:
Показать фрагмент кода
источник
display: table;
вариант идеален для псевдоэлементов (::before
,::after
), где вы не можете добавить дополнительную разметку и хотите избежать нарушения стилей смежных элементов.шесть способов снять кожу с этой кошки:
Кнопка первая: все, что имеет тип
display: block
, примет полную ширину родителей. (если не в сочетании сfloat
илиdisplay: flex
родителем). Правда. Плохой пример.Кнопка 2: переход
display: inline-block
приведет к автоматической (а не полной) ширине. Затем вы можете центрироваться, используяtext-align: center
упаковочный блок . Вероятно, самый простой и наиболее совместимый, даже с «винтажными» браузерами ...Кнопка 3: Нет необходимости надевать что-либо на обертку. Так что, возможно, это самое элегантное решение. Также работает вертикально. (Поддержка браузера для transstlate достаточно хорошая (≥IE9) в наши дни ...).
Кстати, также отличный способ для вертикального центрирования блоков неизвестной высоты (в связи с абсолютным позиционированием).
Кнопка 4: Абсолютное позиционирование. Просто убедитесь, что в обертке зарезервировано достаточно высоты, так как никто другой не будет (ни clearfix, ни неявный ...)
Кнопка 5: float (который также приводит элементы уровня блока к динамической ширине) и относительный сдвиг. Хотя я никогда не видел этого в дикой природе. Возможно, есть недостатки ...
Обновление: кнопка 6: и в настоящее время вы также можете использовать flex-box. Обратите внимание, что стили применяются к оболочке центрированного объекта.
→ полный исходный код (синтаксис стилуса)
источник
Я нашел более элегантное решение, сочетающее «встроенный блок», чтобы избежать использования float и hacky clear: оба. Это все еще требует вложенных divs tho, который не очень семантический, но он просто работает ...
Надеюсь, поможет!
источник
Если целевой элемент абсолютно позиционирован, вы можете отцентрировать его, переместив его на 50% в одном направлении (
left: 50%
), а затем преобразовав его на 50% в направлении противостояния (transform:translateX(-50%)
). Это работает без определения ширины целевого элемента (или сwidth:auto
). Позиция родительского элемента может быть статической, абсолютной, относительной или фиксированной.источник
По умолчанию
div
элементы отображаются как блочные элементы, поэтому они имеют ширину 100%, что делает их центрирование бессмысленным. В соответствии с предложением Arief, вы должны указать a,width
а затем использовать егоauto
при указанииmargin
для центрирования adiv
.В качестве альтернативы вы также можете использовать форсирование
display: inline
, но тогда у вас будет что-то, что ведет себя как aspan
вместо adiv
, так что это не имеет большого смысла.источник
Это будет центрировать элемент, такой как упорядоченный список, или неупорядоченный список, или любой элемент. Просто оберните его Div с классом externalElement и присвойте внутреннему элементу класс innerElement.
Класс outerelement отвечает за IE, старый Mozilla и большинство новых браузеров.
источник
используйте css3 flexbox с justify-content: center;
источник
Небольшая вариация ответа Майка М. Линя
Если вы добавите
overflow: auto;
(илиhidden
) кdiv.product_container
, то вам не нужноdiv.clear
.Это происходит из этой статьи -> http://www.quirksmode.org/css/clearing.html
Вот модифицированный HTML:
И вот модифицированный CSS:
Причина, почему лучше без
div.clear
(кроме того, что иметь пустой элемент кажется неправильным), заключается в чрезмерном усердии в Firefox.Если, например, у вас есть этот HTML:
затем в Firefox (8.0 на момент написания) вы увидите
11px
поле ранееproduct_container
. Хуже всего то, что вы получите вертикальную полосу прокрутки для всей страницы, даже если контент хорошо вписывается в размеры экрана.источник
Попробуйте эту новую CSS и разметку
Вот модифицированный HTML:
И вот модифицированный CSS:
источник
Если вы не предоставите «overflow: hidden» для «.product_container», div «external-center» будет перекрывать другое близлежащее содержимое справа от него. Любые ссылки или кнопки справа от "внешнего центра" не будут работать. Попробуйте цвет фона для «external-center», чтобы понять необходимость «overflow: hidden»
источник
Я нашел интересное решение, я делал слайдер, и мне нужно было центрировать элементы управления слайдом, и я сделал это, и он отлично работает. Вы также можете добавить относительную позицию к родителю и переместить дочернюю позицию по вертикали. Посмотрите http://jsfiddle.net/bergb/6DvJz/
CSS:
HTML:
источник
Есть
display:table;
и установитьmargin
наauto
Важный бит кода:
Независимо от того, сколько элементов у вас сейчас, оно будет автоматически выровнено по центру
Пример во фрагменте кода:
Показать фрагмент кода
источник
Боюсь, единственный способ сделать это без явного указания ширины - это использовать (задыхаться) таблицы.
источник
Дрянное исправление, но оно работает ...
CSS:
HTML:
источник
Простое исправление, которое работает в старых браузерах (но использует таблицы и требует установки высоты):
источник
}
используйте span istead внутренних элементов div
источник
Я знаю, что этот вопрос старый, но я не согласен с ним. Очень похоже на ответ Бобинса, но с примером рабочего кода.
Сделайте каждый продукт встроенным блоком. Центрируйте содержимое контейнера. Готово.
http://jsfiddle.net/rgbk/6Z2Re/
Смотрите также: Центрирование встроенных блоков с динамической шириной в CSS
источник
Это один из способов центрировать что-либо внутри div, не зная внутренней ширины элементов.
источник
мое решение было:
источник
добавьте эту CSS в ваш класс product_container
источник