您的位置:首页 > 其它

总结几种居中放置的情况

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;用一个标签包起来,设置他的垂直居中即可(参考人家的处理)

如若有错,欢迎指导,欢迎提供新的方法
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: