图片在DIV中垂直居中的显示方法

方法一:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 图片在DIV中垂直居中的显示方法</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .juzhong{
                width: 400px;
                height: 400px;
                display: flex;
                float: left;
                justify-content: center;/*在主轴上的对齐*/
                align-items: center;/*在交叉轴上中心点的对齐*/
            }
            /*img{
                width: 100%;
            }*/
        </style>
    </head>
    <body>
        <div class="juzhong">
            <img src="..."/>
        </div>
        <div class="juzhong">
            <img src="..."/>
        </div>
    </body>
</html>
复制代码

方法二:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 图片在DIV中垂直居中的显示方法</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .juzhong{
                width: 400px;
                height: 400px;
                float: left;
                text-align: center;
            }
            .juzhong span{
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
            img{
                vertical-align: middle;
            }
            /*文字超出部分省略号*/
            .content div{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div class="juzhong">
            <span></span><img src="..."/>
        </div>
        <div class="juzhong">
            <span></span><img src="..."/>
        </div>
    </body>
</html>
复制代码

 

posted @   星光泪痕  阅读(2255)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示