Блог

Главная - Вопросы по программированию - Проблема с центрированием в CSS

Проблема с центрированием в CSS

#html #css #center

#HTML #css #центр

Вопрос:

На моем веб-сайте http://morxmedia.com если вы увеличите масштаб, #container потеряет центрирование при навигации. У меня большой опыт работы с css, и я не могу понять, как это исправить. Есть идеи? введите описание изображения здесь

Ответ №1:

Я думаю, вам, возможно, придется использовать этот трюк:

 <div id="wrapper">
    <div id="content">
    </div>
</div>

css —

 .wrapper {
    float: left;
    position: relative;
    left: 50%;
}

.content {
    float: left;
    position: relative;
    right: 50%;
}

* убедитесь, что в вашем содержимом нет автоматических полей. если у вас usst есть поля, используйте фактические значения. авто больше не требуется для центрирования.

Комментарии:

1. Вместе с #wrapper { text-align: center; } оберткой и сбросом содержимого #content { text-align: left; } ?

2. Хорошо, я просто подумал, что дизайн без плавающей точки даст вам больше контроля над макетом.

3. неплохо. Обычно я использую позиционирование, но в этом случае floats лучше, потому что он может сохранить поток. не забывайте margin-left:-484px или около того.

4. Я использовал предложенный пример кода, и вы можете увидеть, как он используется в реальном времени на morxmedia.com Однако я все еще вижу, что проблема возникает.

5. заставил это работать — вместо того, чтобы использовать margin: 0 auto для содержимого контейнера, дайте ему фактические поля справа налево, равные ширине этих желобов с вкладками. margin: auto не подходит для этого трюка.

Ответ №2:

Я разобрался с этим.. Я просто установил для своего основного баннера, который имел ширину 1100 пикселей, значение width: 100% и установил фоновое изображение в центр. Затем я сделал ширину заголовка такой же, как ширина содержимого.