• 技术文章 >web前端 >html教程

    你一定不知道div里的图片是如何水平垂直居中的

    烟雨青岚烟雨青岚2020-07-01 11:35:22转载109

    你一定不知道div里的图片是如何水平垂直居中的,这里小编提供了五种居中的方法,大家一起来看看吧。

    body结构

    <body>
    	<p>
    		<img src="1.jpg" alt="haha">
    	</p>
    </body>

    方法一:
    将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

    <style type="text/css">
    	*{margin: 0;padding: 0;}
        p{
    		width:150px;
    		height: 100px;
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		border:1px solid #000;
    	}
    	img {
            width: 50px;
      		height: 50px;
    	}
    </style>

    结果如下图所示:
    这里写图片描述

    方法二:
    通过position定位来实现。将p设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于p的中心,要是图片的中心位于p的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

    <style type="text/css">
    	*{margin: 0;padding:0;}
    	p{
    		width:150px;
    		height: 100px;
    		position: relative;
    		border:1px solid #000;
    	}
    	img {
      		width: 50px;
      		height: 50px;
      		position: absolute;
      		top: 50%;
    		left: 50%;
      		margin-top: -25px; /* 高度的一半 */
      		margin-left: -25px; /* 宽度的一半 */
    	}
    </style>

    结果如下图所示:
    这里写图片描述

    方法三:可以用在不清楚图片图片或元素的真实宽高情况下
    还是通过position定位来实现。将p设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于p的中心,要是图片的中心位于p的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

    <style type="text/css">
        *{margin: 0;padding:0;}
        p{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

    方法四:

    <style type="text/css">
        *{margin: 0;padding:0;}
        p{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

    方法五:弹性布局flex

    <style type="text/css">
        *{margin: 0;padding:0;}
        p{
            width:150px;
            height: 100px;
            border:1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>

    效果都一样,希望能帮到大家!

    本文转自:https://blog.csdn.net/DreamFJ/article/details/68921957

    推荐教程:《HTML教程

    以上就是你一定不知道div里的图片是如何水平垂直居中的的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:CSDN,如有侵犯,请联系a@php.cn删除
    专题推荐:div 图片 居中
    上一篇:你应该了解的一些HTML优化技巧 下一篇:两分钟了解html中a标签的用法
    第12期线上周末培训班

    相关文章推荐

    • HTML的<div> 标签• html中div标签有什么作用• div代表什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网