Menu
I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
649
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to the img's width/2. pls view the demo.
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
