<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="gbk">
<title></title>
</head>
<body>
<style type="text/css">
* {margin:0;padding:0;}
.warp{
width: 1000px;
height: 1000px;
background: rgba(0,0,0,0.3);
}
.imgbox {
width:200px;
text-align:center;
border:1px solid #f00;
line-height:200px;
height:200px;
font-size:200px
}
*>.imgbox{
font-size:12px
}
.imgbox img {
vertical-align:middle
}
</style>
<div class="warp">
<div class="imgbox">
<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" />
</div>
<style type="text/css">
.imgbox2{
width: 200px;
height: 200px;
border: 1px solid #f60;
display: table-cell;
vertical-align: middle;
*display:block;
*font-size: 174.6px;
*font-family:arial;
text-align: center;
}
</style>
<p>font-size:height*0.873</p>
<div class="imgbox2">
<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
</div>
<style type="text/css">
.imgbox3{
width: 200px;
height: 200px;
text-align: center;
border: 1px solid #f40;
}
.imgbox3 img{
vertical-align: middle;
}
.imgbox3 i{
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
</style>
<p>加标签</p>
<div class="imgbox3">
<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
<i></i>
</div>
<style type="text/css">
.imgbox4{
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ddd;
}
.imgbox4_inner{
*position: absolute;
*left: 50%;
*top: 50%
}
.imgbox4_inner img{
*position: relative;
*left: -50%;
*top: -50%
vertical-align: middle
}
</style>
<div class="imgbox4">
<div class="imgbox4_inner">
<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
</div>
</div>
<style type="text/css">
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
</style>
<p>文字居中</p>
<div class="zxx_align_box_2">
<span class="zxx_align_word">这里显示多行文字。</span>
</div>
<style type="text/css">
.warp{
width: 200px;
height: 150px;
overflow: hidden;
display: table;
border: 1px solid #000;
*position: relative;
}
.sub_warp{
display: table-cell;
vertical-align: middle;
*position: absolute;
*top: 50%;
}
.content{
*position: relative;
*top: -50%;
}
</style>
<div class="warp">
<div class="sub_warp">
<div class="content">
垂直居中不<br/>
啊哈哈
</div>
</div>
</div>
</div>
</body>
</html>
垂直居中图片文案
最新推荐文章于 2024-09-23 11:33:30 发布