img图片上下左右切相对文字【居中】的方法

方法一：

给img所在的div进行设置： display:table-cell;  text-align:center;   vertical-align:middle; 

然后给图片本身设置：vertical-align:middle;相对文字居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box{ width: 800px; height: 200px; border: 1px solid #ccc; display:table-cell; text-align:center; vertical-align:middle;}
    .box img{vertical-align:middle}
    </style>

</head>
<body>
    <div class="box">你好啊你好啊<img src="11/aaaaa.png"></div>
</body>
</html>

显示效果：

 

方法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {margin:0;padding:0} 

div { width:500px; height:500px; border:1px solid #666; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } 

div p { position:static; +position:absolute; top:50% } 

img { position:static; +position:relative; top:-50%;left:-50%; }
    </style>

</head>
<body>
    <div><p><img src="11/aaaaa.png" /></p></div>
</body>
</html>

 

方法三、

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
 *{margin:0;padding:0;} 

 div { width:500px;border:1px solid #666; height:500px; background:url("11/aaaaa.png") center no-repeat }     //背景居中

</style>
</head>
<body>
    <div></div>
</body>
</html>

 

posted @ 2015-03-05 16:30  Shimily  阅读(1127)  评论(0)    收藏  举报