CODEWITHSUNDEEP
htmlcsscss-positioncentering
Phorden
Phorden

Reputation: 1034

CSS - fix div to top center

I would like to center a div inside of the header which is 100% width. The div that needs to be centered has a physical width and height. I have tried using position absolute, but when resizing the screen, the div will stay centered. I want the div to stay in the center of the design, not the screen. How do I accomplish this? I also do not want to use position fixed for this.

css:

header{
  position: relative;
  width: 100%;
  height: 65px;
  background-color: #662D91;
}
#banner{
  position: absolute;
  left: 50%;
  margin-left: -240px;
  width: 480px;
  height: 115px;
  border-radius: 20px;
}

HTML:

    <header>
        <div id="banner">
            <a href="/index">
                <img src="/_images/layout/PentaOneStop_headerLogo.png" class="img-center" />
            </a>
        </div>
    </header>

EDIT: I have solved my issue by adding a div between the full width header and the logo that is the width of the design. It appears to have fixed my problem.

JSFiddle of my solution to my problem: http://jsfiddle.net/U3Hpa/2/

Upvotes: 3

Views: 9229

Answers (5)

Phorden
Phorden

Reputation: 1034

I solved my issue by adding another div that was a child of the header element but the parent of #banner. I then set it at a width of 980px (same as width of content container), and set it to margin: 0 auto;. That seemed to fix my issue. I was looking for a CSS solution without changing the HTML markup, but I could not find one. Thanks for all the feedback.

The Fiddle does not illustrate the solution the best because of the small viewport, but the code is accurate.

JSFiddle: http://jsfiddle.net/U3Hpa/2/

Upvotes: 1

Somberi Janma
Somberi Janma

Reputation: 71

Try this:

header{
  position: relative;
  width: 980px;
  height: 65px;
  background-color: #662D91;
}
#banner{
  position: relative;
  margin: 0 auto;
  width: 480px;
  height: 115px;
  border-radius: 20px;
}

Upvotes: 0

Colum
Colum

Reputation: 986

You should try this:

 #banner{
 position: fixed;
 left: 50%;
 margin-left: auto;
 margin-right: auto;
 width: 480px;
 height: 115px;
 border-radius: 20px;
 }

Upvotes: 0

Eric Whitehead
Eric Whitehead

Reputation: 130

The simple solution is to do text-align: center.

#banner{
  text-align: center;
}

http://jsfiddle.net/U3Hpa/

Upvotes: 1

Anindya Basu
Anindya Basu

Reputation: 659

#banner{
  margin-left: auto;
  width: 480px;
  height: 115px;
  border-radius: 20px;
}

by manually defining a left position, and margins, you make the browser do that no matter what the size of your other divs.

the auto feature in your margins will automatially center the div relative to the header

Upvotes: 0

Related Questions