您的位置：首页 > Web前端 > CSS

CSS居中问题

2016-05-26 22:23 633 查看

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>div标签</title>

<style type="text/css">

/* 浮动 */

.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;line-height: 0;clear: both;visibility: hidden;}

.clearfix {zoom:1;clear: both;display: block; _height:1px;}

body{padding:0;margin:0;}

.relative{position: relative;}

.tk{
position: relative;width: 1024px;background: #aaa;
margin: 0 auto;
text-align: center;

}

.tk-s{
position: absolute;color: red;font-size: 20px;font-family: '微软雅黑';
border-radius: 10px;background: #F0F0F0;width: 100px;height: 50px;text-align: center;line-height: 50px;

left: 50%;margin-left:-50px;
top: 50%;margin-top: -25px;

}

.tk-m{
position:relative;width:100px;height:100px;
left: 50%;margin-left:-50px;

}

</style>

</style>

</head>

<body>

<div class="tk">
1、使用text-align: center使diplay:inline-block元素居中<br>

<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg"><br>

2、指定宽度的display:block元素使用margin:auto居中<br>
3、使用position: absolute;left：left: 50%;margin-left:-宽度居中<br>
<div class="relative clearfix">
<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="display:block;margin:0 auto;"><br>
<div class="tk-s">彩云之南</div>
</div><br>

4、文字环绕居中<br>

<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="vertical-align: middle;" width="50" height="50">
<span class="nh">图片文字环绕</span><br><br><br>

5、非绝对定位使用left居中
<div class="relative">
<img class="tk-m" src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="display:block"><br>
</div>

</div>

</body>

</html>

--div高度不固定,img高度固定时垂直居中

.div{vertical-align:middle;}

.div-img{display:inline-block;vertical-align: middle;position: relative;top:50%;height:20px;margin-top:-10px;}

.div-text{display:inline-block;vertical-align: middle;position: relative;top:50%;height:20px;margin-top:-10px;}

<div class="div">

<img class="div-img" src="1.jpg">

<span class="div-text">98556</span>

</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航