1.有这样一段代码:
<p>您在<img src="images/querenzhifu.png">后会指引去支付宝,按照支付宝的提示完成付款操作。</p>
这样在一个块级元素下,实现img的居中,我们不能直接给绝对定位去实现它,因为绝对定位会产生图片覆盖文字的效果,那么这时怎样进行居中呢,
方法很简单,不需要对p标签设置宽高或是其他的什么,只需给img一个vertical-align:middle,就可以实现图片与文字的一个居中了。
一.内联元素的居中方法,如下:
水平居中:
1.行内元素,直接设置text:align:center
2.Flex布局,设置display:flex; justify-content:center;该方法呢,有些浏览器不支持。
垂直居中:
1.父元素高度确定的单行文本或行内元素,设置height = line-height;
2.父元素高度确定的多行文本或行内元素
a:插入table,然后设置vertical-align:middle;
b:先设置display:table-cell,再设置vertical-align:middle;
二.块级元素的居中方法,如下:
水平居中:
1.定宽块级元素,设置margin:0 auto;
2.不定宽块级元素,
a:在元素外加入table标签(完整的table,包括table,tbody,tr,td),该元素写在td内,然后设置margin的值为auto;
b:给该元素设置display:inline;
c:给该元素设置position:relative;left:50%;
垂直居中:
1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
2.利用display:table-cell属性;
3.使用css3的新属性transform:translate(x,y),x和y是相对x轴和y轴移动,可以给负值;
4.使用:before,在元素前插入...;
好了,本篇就到这里了。