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

20

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

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

Вкратце, это так: установка ширины div - выравнивание центра div - выравнивание текста (содержимого) по левому краю.

Ваш Ответ

3   ответа
12

Пытаться:

#your_div_id {
  width: 855px;
  margin:0 auto;
  text-align: center;
}
Это в значительной степени сделали свое дело! Выравнивание текста должно было быть оставлено и сделано. Только сейчас .... Текст пересекает фоновые строки содержимого. Попытка решить это с некоторым дополнением, но это не сдвинется с места ... Alex
большое спасибо =) William
Просто убедитесь, что у div'а семантический порядок. <div id = "content"> <! - правильно стилизован по ширине -> <div id = "your_div_id"> [текстовое содержимое] </ div> </ div> Kleber S.
29

Установите авто поля на внутреннем 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>
8

Используйте авто поля.

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

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

Дальнейшее чтение наSimpleBits CSS Центрирование 101

Похожие вопросы