css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

html-css09

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中,第1张

1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。

2、打开浏览器查看结果,图片已处于正中状态。

3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。

4、在浏览器查看结果,图片水平,垂直均居中。

可以的,水平居中是align=“center” 垂直是valign="middle",代码实例如下:

<table width="1000px" border="1">

<tr><td align="center"><img src="xx.jpg"></td></tr>

</table>

上面的代码即设置图片水平居中,同理可以设置其垂直居中。

文字垂直居中:

设置标签高度height,并且设置行高line-height值与height值一样。

也可以给父标签设置相对定位(position:relative),然后文字用一个行内标签(如span)包裹,并且给span设置绝对定位。

div垂直居中:

可以使用margin或padding来控制。比如margin:70% 0;(上下70%,左右0)

如果满意,望采纳,谢谢!如果不懂,可随时追问!