我附上了我的网页的样式.该页面的宽度为980px,图像的宽度几乎为1200px.我想要实现的是让页面居中,并尽可能多地显示图像,同时保持图像居中.我试图绝对定位图像,然后在移动设备上,浏览器页面设置为图像的宽度,内容不会保持居中.
基本上,可能有屏幕,整个图像不会显示给用户,但只有适合屏幕.
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>
解决方法
请使用位置：相对于图像.像这样：
<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代码：
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
margin-left等于img的width / 2.查看demo.
