部分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;从而达到靠左
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值