Центрирование нескольких плавающих элементов в контейнере - PullRequest
Новая
       30

Центрирование нескольких плавающих элементов в контейнере

0 голосов
/ 20 января 2010

Хорошо, вот ссылка на сайт, над которым я работаю. http://danberinger.com/preview.html

В настоящее время у меня есть сообщение внутри его собственного div (#messagebox) и изображение в его собственном div (#picture) Оба этих div'а всплывают влево. Я поместил их в контейнер div с именем #intro_container. Я хотел бы сосредоточить это содержащий div, но у меня проблемы с этим. Я попытался установить поля на 0 и авто, но это не сработало. Это должно быть какой-то проблемой с количеством различных уровней div, с которыми я пытаюсь работать ....

Любая помощь будет принята с благодарностью!

Ответы [ 3 ]

1 голос
/ 20 января 2010

Установите ширину для вашего #intro_container контейнера, иначе margin: 0 auto; не будет работать.

0 голосов
/ 20 января 2010

иногда хорошо центрировать такие вещи: 

<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">

  <div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
  </div>
</div>
</body>
</html>

всегда работает

0 голосов
/ 20 января 2010

Чтобы 0 авто работал, вы должны указать ширину.

Вы можете поместить все в контейнерный элемент div, например, с шириной 900px margin 0 auto, или просто применить эти стили к вводному контейнеру.

Прямо сейчас ваш CSS масштабирует все до ширины области просмотра, поэтому с плавающей точкой влево изображения отправляются на ширину intro_container, которая не имеет определенной ширины.

Также обратите внимание, вы можете применить свой идентификатор прямо к изображению! не нужно оборачивать это в div. Хорошей практикой является стилизация элементов семантически.

...