Невозможно центрировать элементы CSS - PullRequest
Новая
       6

Невозможно центрировать элементы CSS

0 голосов
/ 28 августа 2009

Я не могу сделать так, чтобы мой сайт был сосредоточен на моей жизни с помощью CSS. Я попробовал все обычные методы, предлагаемые в Интернете, включая: 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Затем с помощью 

<div id="container>
<!-- Centered Content Goes here-->
</div>

Но это просто не пойдет в центр. Он остается в левой части страницы.

Пример CSS для элемента, который я хочу центрировать, таков: 

#topHeader
{
    background:url(images/top_header.jpg);
    position:absolute;
    width: 695px;
    height: 242px;
    top: 0px;
    left: 0px;
}

Итак, мой HTML будет выглядеть так: 

<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>

Но, как я упоминал ранее, элемент остается на месте. Спасибо! Eric

Ответы [ 6 ]

5 голосов
/ 28 августа 2009

Попробуй с этим мертвая точка

0 голосов
/ 28 августа 2009

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

Надеюсь, это поможет вам.

0 голосов
/ 28 августа 2009

Основной проблемой является абсолютное позиционирование вашего элемента #topHeader. Поскольку он абсолютно позиционирован с помощью top: 0px; left: 0px;, это именно то, где он будет располагаться - в верхнем левом углу страницы.

Начните с удаления абсолютного позиционирования из элемента #topHeader.

0 голосов
/ 28 августа 2009

Попробуйте добавить это в начало вашего CSS-файла: 

// Wipes out any preexisting padding and margin.
html, body {
    padding: 0;
    margin: 0;
}

Затем добавьте позицию: относительная; Директива к классу, который вы хотите центрировать. На самом деле, попробуйте добавить его в html, body one, чтобы все ваши классы использовали относительное положение. Возможно, у вас есть позиция: абсолютная; набор, который затем объединяется с левым: 0px; чтобы заставить заголовок содержать игнорировать поля: 0 auto; и оставайтесь слева от страницы.

0 голосов
/ 28 августа 2009

Вы размещаете заголовок абсолютно так, чтобы он был смещен относительно содержащего блока (т.е. тела), а не родительского элемента. То, что вы хотите, это относительное позиционирование.

абсолютный

Положение ящика (и, возможно, размер) указывается с помощью 'top', «правый», «нижний» и «левый» свойства. Эти свойства указывают смещения относительно коробки содержащий блок. Абсолютно позиционированные ящики вынимаются из нормальный поток. Это значит у них нет влияние на макет позже братья и сестры. Кроме того, хотя абсолютно позиционированные поля имеют поля, они делают не разрушаться с другими полями.

- 9.3.1 Выбор схемы позиционирования: свойство 'position'

Абсолютные: 

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:absolute;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

Относительная: 

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:relative;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>
0 голосов
/ 28 августа 2009

Насколько я знаю, это просто не работает. text-align центрирует текст или встроенный контент, а не блокирует элементы.

Редактировать: С другой стороны, ссылка Дезинтегратора имеет смысл. К сожалению, только для блоков фиксированного размера.

...