总结几种居中放置的情况
2015-09-07 10:02
232 查看
我从事web前端的时间还不是很长,在工作中遇到一些居中的情况,总结了几种方法,可能有错误,欢迎指导
1、实现文字的居中:
a、水平居中:text-align:center,垂直居中:vertical-align:middle;
b、line-height:实现文字的垂直居中(个人比较偏爱这种文字居中);
c、如果是单行文本也可以用padding去撑开;
(暂时文字只想到这几个居中方法,欢迎补充)
2、实现图片的垂直水平居中
a、div{ width:100px; height:100px; position:relative; text-align:center; border:1px solid #cccccc; overflow:hidden; }
div img { position:absolute; left:50%; top:50%; margin-left:/*图片的宽度*/; margin-top:/*图片的高度*/}
b、div{width:200px; height:200px; margin:30px auto; border:1px solid red;line-height:200px;text-align:center;}
div img { vertical-align:middle;}
c、<div class="outline"><div class="inline"><img src=""></div></div>
<style>
.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table;}
.inline{ display:table-cell; vertical-align:middle;}
</style>
d、<div class="outline"><div class="inline"><img src=""></div></div>
<style>
.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table-cell; position:relative; text-align:center; vertical-align:middle;}
.inline{ *position:absolute; top:50%; left:50%;}
.inline img { *position:relative; top:-50%; left:-50%;}
</style>
e、也可以用padding撑开
3、实现单行文字和图片的居中
a、<div><img src=""><span>可以自己试一下</span></div>
<style>
div{width:200px; border:1px solid #cccccc; padding:10px; }
div img { vertical-align:middle;}
div span { vertical-align:middle;}
</style>
4、实现多行文字和图片的居中
<div><img src=""><span>可以自己试一下</span></div>
<style>
div{width:200px; border:1px solid #cccccc; padding:10px; }
div img { vertical-align:middle; display:inline-block;}
div span { vertical-align:middle; display:inline-block;}
这种就是把文字档图片处理,设置他的display:inline-block;用一个标签包起来,设置他的垂直居中即可(参考人家的处理)
如若有错,欢迎指导,欢迎提供新的方法
1、实现文字的居中:
a、水平居中:text-align:center,垂直居中:vertical-align:middle;
b、line-height:实现文字的垂直居中(个人比较偏爱这种文字居中);
c、如果是单行文本也可以用padding去撑开;
(暂时文字只想到这几个居中方法,欢迎补充)
2、实现图片的垂直水平居中
a、div{ width:100px; height:100px; position:relative; text-align:center; border:1px solid #cccccc; overflow:hidden; }
div img { position:absolute; left:50%; top:50%; margin-left:/*图片的宽度*/; margin-top:/*图片的高度*/}
b、div{width:200px; height:200px; margin:30px auto; border:1px solid red;line-height:200px;text-align:center;}
div img { vertical-align:middle;}
c、<div class="outline"><div class="inline"><img src=""></div></div>
<style>
.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table;}
.inline{ display:table-cell; vertical-align:middle;}
</style>
d、<div class="outline"><div class="inline"><img src=""></div></div>
<style>
.outline{ width:200px; height:200px; border:1px solid #cccccc; display:table-cell; position:relative; text-align:center; vertical-align:middle;}
.inline{ *position:absolute; top:50%; left:50%;}
.inline img { *position:relative; top:-50%; left:-50%;}
</style>
e、也可以用padding撑开
3、实现单行文字和图片的居中
a、<div><img src=""><span>可以自己试一下</span></div>
<style>
div{width:200px; border:1px solid #cccccc; padding:10px; }
div img { vertical-align:middle;}
div span { vertical-align:middle;}
</style>
4、实现多行文字和图片的居中
<div><img src=""><span>可以自己试一下</span></div>
<style>
div{width:200px; border:1px solid #cccccc; padding:10px; }
div img { vertical-align:middle; display:inline-block;}
div span { vertical-align:middle; display:inline-block;}
这种就是把文字档图片处理,设置他的display:inline-block;用一个标签包起来,设置他的垂直居中即可(参考人家的处理)
如若有错,欢迎指导,欢迎提供新的方法
相关文章推荐
- 【Java】J2SE
- 移动端干货
- C# 之 将string数组转换到int数组并获取最大最小值
- jQuery平滑旋转幻灯片特效代码分享
- OpenGL-----Reinhard Operator Tone Mapping
- 使用NSKeyedArchiver归档和NSKeyedUnarchiver读档
- 北京第九次Spark meetup会议资料分享
- 《C++primer(第五版)》学习之路-第四章:表达式
- 北京第九次Spark meetup会议资料分享
- 转一个网址,canvas用法
- 修改类不用重启Tomcat加载整个项目
- MySQL数据库迁移
- mysql数据库修改编码
- Trie 前缀树的c 实现
- unity 常用网站、插件、技术记录
- Ember.js 入门指南——类的定义、初始化、继承
- Debian 5.0升级GRUB为GRUB2
- Ecshop开发
- Ember.js 入门指南——类的定义、初始化、继承
- js调用百度地图及调用百度地图的搜索功能