CSS - fix div to top center

Question

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/

possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) — Bryan Downing, Apr 29 '14 at 21:51
@BryanDowning Not exactly what I am looking for as I am already able to center it, just don't want it to be centered with the window. — Phorden, Apr 29 '14 at 21:52
@Phorden i now don't think i understand the question. Centered in relation to what? — 13ruce1337, Apr 29 '14 at 21:54
@13ruce1337 Sorry, I may not have clarified well enough. I wanted it centered to the width of the design (980px) and not the width of the viewport. — Phorden, Apr 29 '14 at 21:57
I can't find better solution to keep the div fixed as lock it by its `width, height, position` in place. — SOReader, Apr 29 '14 at 21:57
FYI lorempixel is a good resource when you have an image that is important to the demo: http://jsfiddle.net/aajLp/ — Joseph Marikle, Apr 29 '14 at 21:59
I have fixed the issue by creating another div in the header that is the width of the content (980px) and centered it. This fixed my issue with it staying center to the design and not to the viewport. — Phorden, Apr 29 '14 at 22:01
@Phorden if you have solved the problem, please post a self-answer and mark it as accepted when you are able to. — Joseph Marikle, Apr 29 '14 at 22:09
@JosephMarikle I have posted my solution as an answer, however I will not be able to accept it at this time. — Phorden, Apr 29 '14 at 22:52

score 1 · Answer 1 · answered Apr 29 '14 at 21:55

1

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

#banner{
  text-align: center;
}

http://jsfiddle.net/U3Hpa/

answered Apr 29 '14 at 21:55

Eric Whitehead

130
5

score 1 · Answer 2 · answered Apr 29 '14 at 22:51

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/

score 0 · Answer 3 · answered Apr 29 '14 at 21:53

#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

Somberi Janma · Answer 4 · 2014-04-29T22:05:18.763

0

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;
}

edited Apr 29 '14 at 22:05

answered Apr 29 '14 at 21:57

Somberi Janma

1
2

score 0 · Answer 5 · answered Apr 29 '14 at 21:58

0

You should try this:

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

answered Apr 29 '14 at 21:58

Colum

996
2
8
23

CSS - fix div to top center

5 Answers5