一、垂直居中方法:
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;从而达到靠左
让div中的背景图居中显示
我们平时加背景图是这样的
效果是这样的
如果我想要让背景图居中应该如何做呢?
在css中的background加上两个center即可
效果是这样的
如果想要居中靠上对齐就top center,如果靠左居中就left center,其他的以此类推,实测left在前还是再后木有影响