html – 使用CSS中心_html-js-css

概述我想把图像放在一个div里面. div的宽度为300px.图像宽度仅在运行时才知道.它通常大于300px,所以图像应该是中心的,左右剪切.在这种情况下,margin 0 auto不起作用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr 我想把图像放在一个div里面. div的宽度为300px.图像宽度仅在运行时才知道.它通常大于300px,所以图像应该是中心的,左右剪切.在这种情况下,margin 0 auto不起作用.

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML><head><style type="text/CSS">div{wIDth:300px;border:1px solID red; overflow:hidden}img{/* NOTE!!!!margin:auto; doesn't work when image wIDth is bigger than div wIDthimage wIDth is kNown only at runtime!!!*/}</style></head><body><div>    <img src="" /></div></body></HTML>

感谢任何CSS的想法

UPD这个有趣的任务是遵循here

解决方法如果您在图像周围包装另一个元素,则可以使其起作用：

<div >    <div ><img src="" alt="" /></div></div>

和以下CSS：

.outer {    wIDth: 300px;    border: 1px solID red;    overflow: hIDden;    *position: relative;}.inner {    float: left;    position: relative;    left: 50%;}img {    display: block;    position: relative;    left: -50%;}

位置：相对于.outer标有*,所以它只适用于ie6 / 7.你可以把它移动到一个条件的IE样式表,如果这是你喜欢的,或者删除*完全.需要避免现在相对定位的孩子不会溢出.

总结

以上是内存溢出为你收集整理的html – 使用CSS中心全部内容，希望文章能够帮你解决html – 使用CSS中心所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1142751.html