html+css实现图片或元素的垂直、水平同时居中的多种方法(定位)

实现元素或图片的上下、左右居中的三种方法

效果图如下:

html+css实现图片或元素的垂直、水平同时居中的多种方法(定位)

html+css实现图片或元素的垂直、水平同时居中的多种方法(定位)

方法一:利用vertical-align属性实现图片上下居中

先设置父元素样式text-align: center,实现图片左右居中,给图片添加一个同级的span标签,设置宽度为零,高度100%,两者都设置display: inline-block; vertical-align: middle,即可实现图片上下居中,具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdsjy.html