我附上了我的网页的样式.该页面的宽度为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.
原文地址:https://www.jb51.cc/css/214313.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。