zoukankan      html  css  js  c++  java
  • 实现div里的img图片水平垂直居中

    body结构

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

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

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

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

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

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            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>

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

  • 相关阅读:
    【转】Quartz Cron 触发器 Cron Expression 的格式
    [转]MYSQL同时LEFT JOIN 多个表一例
    collapse用法
    flavor用法
    horny
    ever since用法
    be headed for用法
    Lemme用法
    scary用法
    feel like用法
  • 原文地址:https://www.cnblogs.com/zrui-xyu/p/8192691.html
Copyright © 2011-2022 走看看