如何解决任何人都可以将IMAGE与HTML和CSS垂直对齐吗?
| 我不确定CSS是否可以解决问题,但想在此进行确认。 这是代码段。 http://jsfiddle.net/2CHEb/ HTML:<div class=\"wraptocenter\"><span></span>
<img src=\"blah\" /></div>
<div class=\"description\">Lorizzle ipsum dolor sit amizzle,tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle,bizzle volutpizzle,nizzle quis,gangster vizzle,arcu. Pellentesque eget tortizzle. Sizzle </div>
CSS:
.wraptocenter {
background: orange;
float: left;
height: 120px;
margin: 0 10px 5px 0;
width: 120px;
}
.wraptocenter img {
max-height: 120px;
width:120px;
}
一些技巧,例如http://www.brunildo.org/test/img_center.html
可以,但是如果我将div浮动,它将停止工作。
我正在浮动div,以便另一个包含Text的div可以像报纸文章一样环绕图像。
另外,我从其他网站获取图片,并将宽度设置为120px。因此,每次都会使高度动态变化。
这可能吗?
谢谢。
解决方法
这将在现代浏览器和IE8 +中运行。
IE7根本不支持
display: table-cell
。希望您不需要IE7支持:)
http://jsfiddle.net/2CHEb/6/
.wraptocenter {
float: left;
margin: 0 10px 5px 0;
}
.wraptocenter > div {
height: 120px;
width: 120px;
background: orange;
display: table-cell;
vertical-align: middle
}
.wraptocenter img {
max-height: 120px;
width: 120px;
display: block
}
,如果在.wraptocenter上放置position:relative;
,然后再放置position:absolute; float:left; top:50%; margin:-60px 0 0 0;
,则可以垂直居中。
您的另一个选择是将图像设置为背景图像,并以百分比(或像素)定位
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。