CSS居中效果

文本框垂直对齐文本输入框:

input{vertical-align:middle; }

单行文本在容器内垂直居中:

#test{height:20px;line-height:20px;}

让已知高度的容器在页面中水平居中:

#test{position:absolute;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

让未知尺寸的图片在已知容器内水平垂直居中:

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;test-align:center;vertical-align:middle;}

#test p {*position:absolute;*top:50%;*left:50%;margin:0;}

#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle; }

让整个页面居中:

body{text-align:center; }

#text{width:960px;margin:0 auto; text-align:left; }

posted on 2017-06-25 12:42  YUHONGCUISummer  阅读(114)  评论(0编辑  收藏  举报