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

Question

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

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

Answer 1

Небольшое отклонение от Ответ Майка М. Линя

Если вы добавите 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. Хуже всего то, что вы получите вертикальную полосу прокрутки для всей страницы, даже если контент хорошо вписывается в размеры экрана.

Answer 2

<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;
}

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

Answer 3

Do 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>

Answer 4

Я нашел интересное решение, я делал слайдер, и мне нужно было центрировать элементы управления слайдом, и я сделал это, и он отлично работает. Вы также можете добавить относительную позицию к родителю и переместить дочернюю позицию по вертикали. Взгляните 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>

Answer 5

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

<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>

Answer 6

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

Answer 7

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

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

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

Answer 8

Дрянное исправление, но оно работает ...

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>

Answer 9

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

}

использовать диапазон внутренних дивизий

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

Answer 10

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

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

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