Не могу центрировать div внутри другого div

Я использовал функцию поиска, и это просто не будет center, поскольку я не могу понять некоторые предложения и те, которые я могу не сработать. Google не оставляет мне результатов.Не могу центрировать div внутри другого div

Я хочу использовать 1 div как «фон как таковой», так что первые 150px экрана будут синими.

Затем я хочу логотип в поле centered950px широкий по 150px вниз.

«logo div» (я назвал его headercontent) должен быть «сверху» из headerbackgroundblue div, которым я управлял.

Однако это не центрирует окно внутри этого DIV (950px широких в центре будет хранить все содержимое так, чтобы она хорошо выглядит на все экраны, однако синий 1920px широк, чтобы сделать сайт лучше выглядеть на больших разрешениях.

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
.headercontent { 
    z-index: 2; 
    position: absolute; 
    height: 150px; 
    width: 950px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.bluebackgroundtop { 
    height: 150px; 
    width: 1920px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #3c56a6; 
    z-index: 1; 
    position: absolute; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Kleenzone - Commercial Cleaning Services</title> 
     <link href="style/style.css" rel="stylesheet" type="text/css" /> 
    </head> 

    <body> 
     <div class="bluebackgroundtop"></div> 
     <div class="headercontent"> 
      <H1> KLEENZONE </H1> 
     </div> 
    </body> 
</html>

источник

2014-03-28 SN1Dan

Пожалуйста, укажите HTML-код, тоже. – KittMedia

HTML-код. – SN1Dan

normaly вы бы так делали: http://jsfiddle.net/NicoO/42A8M/ –

Вы должны иметь .headerContent внутри из .bluebackgroundtop DIV, а затем стиль, как это:

* { 
    padding: 0; 
    margin: 0; 
} 
.headercontent { 
    height: 150px; 
    width: 950px; 
    margin:0 auto; 
    text-align:center; 
} 
.bluebackgroundtop { 
    height: 150px; 
    width: 1920px; 
    margin:0 auto; 
    background-color: #3c56a6; 
}

DEMO

источник

2014-03-28 13:48:08

это почти сработало, но теперь есть пробел на вершине белого ? – SN1Dan

Это из-за «таблицы стилей пользователя», которая применяет автоматические поля и paddings. Я использую универсальный селектор, чтобы очистить его, но в реальной жизни вы должны использовать [reset.css] (http://www.cssreset.com/). http://jsfiddle.net/GaurangTandon/syZdH/2/ –

@ user3086732 Соответствует ли это требованиям? –

Не могу центрировать div внутри другого div

ответ

Смежные вопросы