Can not center div inside another div

StackOverflow https://stackoverflow.com/questions/22714397

  •  23-06-2023
  •  | 
  •  

Pergunta

I've used the search function and it just will not center as I cannot make sense of some suggestions and those I can do not work. Google leaves me no results either.

I want to use 1 div as a 'background as such' so that the first 150px of the screen down are blue.

Then I want the logo in a centered box 950px wide by 150px down.

The 'logo div' (I've called it headercontent) needs to be 'on top' of the headerbackgroundblue div, which I have managed.

However it will not center the box within that div (950px wide centered will store all content so that it looks good on all screens, however the blue is 1920px wide to make the website look better on larger resolutions.

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>
Foi útil?

Solução

You need to have the .headerContent inside of the .bluebackgroundtop div, and then style like this:

* {
    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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top