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

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

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

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

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

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

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

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

Вы могли установить свойство ‘display’ на ‘inline-block’ для превращения блока в объект уменьшения к соответствию, которым может управлять текст его родителя - выравнивают свойство, но поддержка браузера является пятнистой. Можно главным образом выйти сухим из воды при помощи взломов (например, видеть-moz-inline-stack), если Вы хотите пойти тем путем.

другим способом пойти являются таблицы. Это может быть необходимо, когда у Вас есть столбцы, ширина которых действительно не может быть известна заранее. Я не могу действительно сказать то, что Вы пытаетесь сделать от примера code —  there ничто очевидное там, это было бы потребность , уменьшение к соответствию block —  but список продуктов можно было возможно считать табличным.

[PS. никогда не используйте ‘pt’ для размеров шрифта в сети. ‘px’ более надежен при реальной необходимости в тексте фиксированного размера в других отношениях относительные единицы как †˜ % ’ лучше. И вЂњclear: ccc both” —  a опечатка?]

.center{
   text-align:center; 
}

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

JSFiddle

Это - один способ центрироваться, что-либо в отделении не знает внутреннюю ширину элементов.

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

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>