Установите ширину div, выровняйте центр div и выравнивание текста влево

У меня небольшая проблема, но я не могу ее решить. У меня есть заголовок содержимого шириной 864 пикселей, фоновое изображение с повторением-y и нижнего колонтитула. Теперь у меня есть это <div> над фоновым изображением, и я хочу, чтобы он был как ширина 855 пикселей, а текст выравнивался по левому, но все же выровненному центру так, чтобы он вписывался в bg.

У меня когда-то была окая ширина пробела, но я понял, что это было правильное дополнение для моего разрешения экрана.

Су кратко: Установка ширины div - выравнивание центра div - выравнивание его текста (содержимого) влево.

Ответ 1

Задайте автоматические поля на внутреннем div:

<div id="header" style="width:864px;">
    <div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>

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

<div id="header" style="width:864px;text-align: center;">
    <div id="centered" style="text-align: left; width:855px;"></div>
</div>

Ответ 2

Try:

#your_div_id {
  width: 855px;
  margin:0 auto;
  text-align: center;
}

Ответ 3

Используйте автоматические поля.

div {
   margin-left: auto;
   margin-right: auto;
   width: NNNpx;

   /* NOTE: Only works for non-floated block elements */
   display: block;
   float: none;
}

Дальнейшее чтение на SimpleBits CSS Centering 101

Ответ 4

Все эти ответы должны быть достаточными. Однако, если у вас нет определенной ширины, автоматические поля не будут работать.

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

.div {
   position: absolute;
   left: 0;
   right: 0;
   margin-left: 0;
   margin-right: 0;
}