CODEWITHSUNDEEP
htmlcss
Mark J
Mark J

Reputation: 31

Image shifts to the left on page load

I don't understand why my picture shifts to the left. If I refresh the page using CTRL+F5 the picture is centered, exactly where I want it to be when the page loads.

my picture goes left

My HTML

<section id="showcase">
   <div id="container">
       <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
   </div>
</section>

And my css

#container {
    width: 915px;
    margin: auto;
    overflow: hidden;
}

#showcase {
   margin-top: 0px;  
}

Can anyone help me with this?

Upvotes: 0

Views: 693

Answers (4)

Mark J
Mark J

Reputation: 31

I have changed

from container to pic-container and added text-align: center;

now it works :S .. that's wird!

.pic-container {
text-align: center;

}

and

<section id="showcase">
        <div class="pic-container">
            <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
        </div>
    </section>

Anyone have a solution to that ? :O

Upvotes: 0

Jackson
Jackson

Reputation: 3518

I have added your code to jsFiddle to see what is happening. The image is centered in the window as expected.

I believe you may have an un-closed html tag somewhere in the code above the showcase.

You should use an HTML validator service to verify the integrity of your code.

Also I would recommend you use class names instead of using IDs in your html. IDs should only be used for unique elements in the document.

For example:

<section class="showcase">
   <div class="container">
       <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
   </div>
</section>

and also in the css:

.container {
    width: 915px;
    margin: auto;
    overflow: hidden;
}

.showcase {
   margin-top: 0px;  
}

Upvotes: 0

user7236046
user7236046

Reputation:

Add this to your CSS to center the image inside the container.

#showcase #container {
    text-align: center;
}

Upvotes: 0

ppollono
ppollono

Reputation: 3642

Have you tried text center alignement?

#container {
    width: 915px;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

Upvotes: 1

Related Questions