我从事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;用一个标签包起来,设置他的垂直居中即可(参考人家的处理)
如若有错,欢迎指导,欢迎提供新的方法