未知宽高图片水平垂直居中
2014-12-19 00:00
267 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery.min.js" type="text/javascript"></script> <style> .box {width:300px;display:table; border:1px red solid;height:200px; margin:auto; *position:relative;} .content{display: table-cell;vertical-align: middle;*position:absolute; text-align:center; } img{border:1px green solid;*position:relative; *top:-50%;margin:0 auto;} </style> </head> <body> <div class="box"> <div class="content"> <img src="72f082025aafa40f32798dd4a964034f78f0197f.jpg" /> </div> </div> </body> </html>
vertical-align属性设置元素的垂直对齐方式。
其属性值为middle时, 把此元素放置在父元素的中部(content放在box的中部)。
display:table指box作为块级表格来显示(类似 <table>),表格前后带有换行符。
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。
相关文章推荐
- 未知图片宽高水平垂直居中
- 未知宽高图片在容器内水平垂直居中
- 未知宽高图片的水平垂直居中
- [置顶] 未知图片宽高水平垂直居中
- 未知宽高图片水平垂直居中在div
- table-cell实现未知宽高图片,文本水平垂直居中在div
- 未知宽高的图片水平垂直居中的几种方法
- 未知宽高图片垂直居中&&CSS垂直居中总结
- 换行文字、未知宽高图片垂直居中完美解决方案
- 已知/未知宽高的浮动元素水平垂直居中对齐
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- 未知尺寸图片在已知尺寸容器下的水平垂直居中
- 未知宽高div水平垂直居中3种方法,div水平居中3种
- 图片水平垂直居中于DIV(图片未知宽高)
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- 未知宽高的img元素水平垂直居中显示
- 未知宽高图片垂直居中
- 未知宽高图片垂直居中的三种方法
- 未知大小图片在容器的垂直和水平居中问题