部分css实现垂直居中和靠右的方法

一、垂直居中方法:


1)使用padding使多个文本或input在div中居中显示(对div和文本高度有要求):


   将div的高度设为各子元素中高度最高的一个h1,加入我们需要的div高度为h2,那么我们就需要填充padding-top和padding-bottom均为(h2-h1)/2,若选取的h1不是最高的元素高度则可能出现部分模块显示偏下


  (若文字高度未知且容器的高度可伸缩,只要设定padding为某个固定值将容器完全填充即可)


  还有一种多文本固定高度居中的方法就是使用css的display属性使


模拟,这样就可以使用vertical-align:middle了。将display:table设置在父元素上,display:table-cell设置在子元素上即可(该方法对IE6以下版本无效 )
2)    使用line-height使当行文字居中,此时设置line-height和height等值即可,在此之后再设置overflow:hidden;(清除浮动从而达到隐藏溢出的效果)


二、使子元素靠右(非文本)


可以用float:left,但是该方法在对网页进行放大或缩小操作时会对同一父元素下两个不同子元素的相对位置产生影响


所以可以先对父元素设置position:relative,然后对子元素设置position:absolute;left:0px;从而达到靠左

你可能感兴趣的:(前端)