CODEWITHSUNDEEP
htmlcsspositionfixed
Michiel
Michiel

Reputation: 8103

Align a fixed item in css

I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.

Here is my HTML: 

<div class="header_container">
    <div class="header">
        <div class="header_links_icon">
            <a href="https://www.facebook.com target="_blank" class="header_facebook">
                <div class="header_facebook_icon">&nbsp;</div>
            </a>
            <a href="https://twitter.com/" target="_blank" class="header_facebook">
                <div class="header_twitter_icon">&nbsp;</div>
            </a>
        </div>
    </div>
</div>

And here is the CSS I'm using: 

.header_container {
    background-color: black;
    padding-top: 35px;

}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    margin: auto;
    width: 1440px;
    position: fixed
}

And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?

Upvotes: 0

Views: 463

Answers (6)

Shailender Arora
Shailender Arora

Reputation: 7778

Give position fixed in your parent header class rather than using fixed position in header child class...

.header_container {        
        position: fixed;
        top:0;
        left:0;
        right:0;

}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hi you can give the fixed position to the main header_container class so that will work.

    .header_container {
    background-color: black;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background:green;
    height: 100px;
    width: 500px;
    margin: auto;
}

please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/

Upvotes: 0

Stefan
Stefan

Reputation: 3900

This will probably work:

.center {width:1440px;margin:0 auto;}

.header {width:1440px;position:fixed;etc...} // don't use margin:auto here

where

 <div class='header_container>
   <div class='center'>
     <div class='header'>
      <!-- contents -->
     </div>
   </div>
 <div>

Upvotes: 0

Kristian
Kristian

Reputation: 21830

The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.

Positioning by percentage and offsetting with negative margins:

//assuming the block is 200px wide and 100px tall
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by @rgthree), this also works.

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39882

You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.

http://jsfiddle.net/W9ZcY/

.header_container {
    background-color: black;
    padding-top: 35px;
    border: 1px solid red;
}

.header {
    border: 1px solid blue;
    background: gray;
    height: 105px;
    left: 50%;
    margin-left: -70px;
    width: 140px;
    position: fixed
}​

Upvotes: 0

rgthree
rgthree

Reputation: 7273

You could make your header container fixed, then your .header would work:

.header_container {
    background-color: black;
    padding-top: 35px;
    position: fixed;
    top:0;
    left:0;
    right:0;
}

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    margin: auto;
}

The other way would be with negative margins:

.header {
    background-image: url('../images/css/header.png');
    background-repeat: no-repeat;
    height: 605px;
    width: 1440px;
    position: fixed;
    left: 50%;
    margin-left: -720px;
}

Upvotes: 3

Related Questions