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>
<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>
相关文章推荐
- css3 -- 文本
- css 的@media print控制打印
- 一些元素居中的方法css的设置
- 如何让两个元素的相对位置不变,设置css
- Web前端学习第十一天·fighting_使用CSS布局和定位(一)
- CSS3三维旋转模拟书本翻页效果
- CSS3 弹性盒布局模型
- 【css】向页面动态插入css
- 【转】margin:0 auto 与 text-align:center 的区别
- css3渐变、倒影、过渡 20160526
- 【转】一个DIV,如何设置多个背景色(可能是图片,可能是渐变,可能是图片与渐变的混合)
- CSS 层叠及样式表来源
- CSS3-05 样式 4
- css实现登录注册可切换页面与boostrap按钮组
- css 文本超出2行就隐藏并且显示省略号
- CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别
- css学习
- css3 -- 网页字体
- css知识汇总
- Css选择器