Центрирование блока div без ширины

У меня возникла проблема, когда я пытаюсь сосредоточиться на "блоках" блока div, потому что я заранее не знаю ширину div. У кого-нибудь есть решение?

Обновление: проблема заключается в том, что я не знаю, сколько продуктов я покажу, у меня может быть 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>

ОТВЕТЫ

Ответ 1

Обновление 27 февраля 2015 г. Мой первоначальный ответ продолжает проголосовать, но теперь я обычно использую подход @bobince.

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

Мой оригинальный пост для исторических целей:

Возможно, вы захотите попробовать этот подход.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

Вот соответствующий стиль:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

Идея здесь заключается в том, что вы содержите контент, который хотите центрировать, в двух div, внешнем и внутреннем. Вы плаваете оба div, чтобы их ширина автоматически уменьшалась, чтобы соответствовать вашему контенту. Затем вы относительно позиционируете внешний div с его правым краем в центре контейнера. Наконец, вы относительно позиционируете внутренний div в противоположном направлении на половину своей ширины (фактически, внешнюю ширину div, но они одинаковы). В конечном итоге это центрирует содержимое в любом контейнере.

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

Ответ 2

Элемент с 'display: block (по умолчанию div) имеет ширину, определяемую шириной его контейнера. Вы не можете сделать ширину блока в зависимости от ширины ее содержимого (сжиматься до соответствия).

(За исключением блоков, которые являются "float: left/right в CSS 2.1, но это не полезно для центрирования.)

Вы можете установить "свойство отображения" в встроенный блок, чтобы превратить блок в объект с усадкой в ​​соответствие, который можно контролировать с помощью его родительского свойства text-align, но поддержка браузера является пятнистой. Вы можете в большинстве случаев уйти от него, используя хаки (например, см. -moz-inline-stack), если вы хотите пойти этим путем.

Другой способ - это таблицы. Это может быть необходимо, если у вас есть столбцы, ширина которых не может быть заранее известна. Я не могу сказать, что вы пытаетесь сделать из кода примера - там нет ничего очевидного, для чего нужен блок с усаживанием в соответствие, но список продуктов можно считать табличным.

[PS. никогда не используйте 'pt для размеров шрифтов в Интернете. 'Px является более надежным, если вам действительно нужен текст фиксированного размера, в противном случае относительные единицы, такие как%, лучше. И "clear: ccc both" - опечатка?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

Ответ 3

Большинство браузеров поддерживают правило CSS display: table;. Это хороший трюк, чтобы центрировать div в контейнере без добавления дополнительного HTML и применения ограничений стилей к контейнеру (например, text-align: center;, который бы центрировал все остальные встроенные содержимое в контейнере), сохраняя при этом динамическую ширину для содержащегося div:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS

.centered { display: table; margin: 0 auto; }


.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>

Ответ 4

Я нашел более элегантное решение, объединив "встроенный блок", чтобы избежать использования float и хакерского ясного: оба. Он по-прежнему требует вложенных divs tho, который не очень семантичен, но он просто работает...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

Надеюсь, что это поможет!

Ответ 5

шесть способов снять кожу с этой кошки:

Кнопка одна: все, что имеет тип display: block принимает всю ширину родительского элемента. (если не сочетается с float или display: flex parent). Правда. Плохой пример.

Кнопка 2: идет для display: inline-block приведет к автоматической (а не полной) ширине. Затем вы можете text-align: center используя text-align: center на блоке переноса. Наверное, самый простой и наиболее широко совместимый, даже со старинными браузерами...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

Кнопка 3: Нет необходимости надевать что-либо на обертку. Так что, возможно, это самое элегантное решение. Также работает вертикально. (Поддержка браузера для transstlate достаточно хорошая (≥IE9) в наши дни...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Кстати, также отличный способ для вертикального центрирования блоков неизвестной высоты (в связи с абсолютным позиционированием).

Кнопка 4: Абсолютное позиционирование. Просто убедитесь, что в обертке зарезервировано достаточно высоты, так как никто другой не будет (ни clearfix, ни неявный...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

Кнопка 5: float (который также приводит к изменению ширины элементов уровня блока) и относительное смещение. Хотя я никогда не видел этого в дикой природе. Возможно, есть недостатки...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

Обновление: кнопка 6: и в настоящее время вы также можете использовать flex-box. Обратите внимание, что стили применяются к оболочке центрированного объекта.

.wrapSix
  display: flex
  justify-content: center

→ полный исходный код (синтаксис стилуса)

Ответ 6

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

Если целевой элемент абсолютно позиционирован, вы можете центрировать его, перемещая его на 50% в одном направлении (left: 50%), а затем трансформируя его на 50% в направлении оппозиции (transform:translateX(-50%)). Это работает без определения ширины целевого элемента (или с помощью width:auto). Позиция родительского элемента может быть статичной, абсолютной, относительной или фиксированной.

Ответ 7

По умолчанию элементы div отображаются как элементы блока, поэтому они имеют ширину 100%, что делает их бессмысленными. Как было предложено Arief, вы должны указать width, и затем вы можете использовать auto при указании margin, чтобы центрировать a div.

В качестве альтернативы вы также можете заставить display: inline, но тогда у вас будет что-то, что в значительной степени ведет себя как span вместо div, поэтому это не имеет большого смысла.

Ответ 8

Это будет центрировать элемент, такой как упорядоченный список или неупорядоченный список, или любой элемент. Просто оберните его Div с классом outerElement и дайте внутреннему элементу класс innerElement.

Класс outerelement учитывает IE, старую Mozilla и большинство новых браузеров.

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
}

Ответ 9

используйте css3 flexbox с помощью justify-content: center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

Ответ 10

Я боюсь, что единственный способ сделать это без явного указания ширины - использовать таблицы (gasp).

Ответ 11

Незначительное изменение Майк М. Лин отвечает

Если вы добавите overflow: auto; (или hidden) в div.product_container, вам не понадобится div.clear.

Это происходит из этой статьи → http://www.quirksmode.org/css/clearing.html

Здесь находится HTML:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

И здесь изменен CSS:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

Причина, почему это лучше без div.clear (кроме того, что он ошибается, чтобы иметь пустой элемент) является чрезмерным присвоением полей Firefox.

Если, например, у вас есть этот html:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

то в Firefox (8.0 в точке написания) вы увидите 11px margin до product_container. Что еще хуже, так это то, что вы получите вертикальную полосу прокрутки для всей страницы, даже если контент хорошо вписывается в размеры экрана.

Ответ 12

Попробуйте этот новый css и разметку

Здесь находится HTML:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

И здесь изменен CSS:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

Ответ 13

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

Если вы не предоставляете "переполнение: скрыто" для ".product_container", то "внешний центр" div будет перекрывать другое соседнее содержимое справа от него. Любые ссылки или кнопки справа от "внешнего центра" не будут работать. Попробуйте цвет фона для "внешнего центра", чтобы понять необходимость "переполнения: скрытый"

Ответ 14

Я нашел интересное решение, я создавал слайдер и имел центральное управление слайдом, и я сделал это и отлично работал. Вы также можете добавить относительное положение к родительскому элементу и переместить положение ребенка по вертикали. Взгляните http://jsfiddle.net/bergb/6DvJz/

CSS

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

Ответ 15

Сделайте display:table; и установите margin в auto

Важный бит кода:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

Независимо от того, сколько у вас элементов теперь будет автоматически выровнено по центру

Пример фрагмента кода:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

Ответ 16

Crappy fix, но он работает...

CSS

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

Ответ 17

Простое исправление, которое работает в старых браузерах (но использует таблицы и требует установки высоты):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

Ответ 18

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}  

использовать span istead внутренних div

<div class="container_box">
   <span class="content">Hello</span>
</div>

Ответ 19

Я знаю, что этот вопрос старый, но я взламываю его. Очень похоже на bobince, но с примером рабочего кода.

Сделайте каждый продукт встроенным блоком. Центрируйте содержимое контейнера. Готово.

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

См. также: Центрированные блоки с динамической шириной в CSS

Ответ 20

Мое решение было:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

Ответ 21

добавьте этот css в класс product_container

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;