css实现图片的上下、左右居中的两种方法

故事扮演 提交于 2020-03-27 15:30:41

实现图片的上下、左右居中的两种方法

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

text-align: center;

}

.box img{

display: inline-block;

vertical-align: middle;

}

.box span{

width: 0;

height: 100%;

display: inline-block;

vertical-align: middle;

}

</style>

</head>

<body>

     <div class="box"></div>

        <span></span>

</div>

</body>

</html>

 

方法二:使用弹性盒实现,这种方法比上一种方法好操作

只需要给父元素添加display:flex(弹性盒),再给子元素设置margin: auto即可,具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

display: flex;

}

.box img{

margin: auto;

}

</style>

</head>

<body>    

  <div class="box"></div>

</body>

</html>

如果感觉对自己有帮助,麻烦点一下关注,会一直和大家分享知识的,谢谢!!!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!