css 让img图片在div标签垂直居中

朱雀 2023-01-19 11:58 13阅读 0赞

使用 flex 布局

<div class="login">
      <img class="login-img" src="images/logo.png"/>
      <span class="login-wel">早上好，欢迎登录 ~</span>
    </div>

.login-top { 
      display: flex;
      align-items: center; .login-img { 
        width: 34px;
        height: 40px;
      }
      .login-wel { 
        font-size: 28px;
        margin-left: 8px;
        color: #ffffff;
        font-weight: 400;
      }
    }

操作 display: table 完成img图片垂直居中

<div class="tablebox">
    	<div id="imgbox">
    		<img src="1.jpg" alt="">
    	</div>
    </div>

.tablebox { width: 300px;height: 250px;background: #fff;display: table}
    #imgbox{ display: table-cell;vertical-align: middle;}
    #imgbox img{ width: 100px}

用绝对定位完成垂直居中

<div class="posdiv">
    	<img src="1.jpg" alt="">
    </div>

.posdiv{ width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
    .posdiv img{ width: 100px;position: absolute;top: 50%;margin-top: -50px;} // transform:translateY(-50%);

[Css 如何快速让 button 按钮标签水平居中][Css _ button]  
[Css 解决 image 标签间距问题][Css _ image]  
[css 解决 vertical-align: middle 失效问题][css _ vertical-align_ middle]

[Css _ button]: https://blog.csdn.net/weixin_43900414/article/details/115355722?spm=1001.2014.3001.5501
[Css _ image]: https://blog.csdn.net/weixin_43900414/article/details/113242690
[css _ vertical-align_ middle]: https://blog.csdn.net/weixin_43900414/article/details/109528138

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 让img图片在div标签垂直居中

使用 flex 布局 <div class="login"> <img class="login-img" src="images/logo.png"/>

朱雀/ 2023年01月19日 11:58/ 0 赞/ 14 阅读

相关 img在div中水平且垂直居中

一. 问题背景情况：`div`包着一个`img`，要使`img`水平且垂直居中二. 解决方案最最最关键：div中的`text-align:center;`是

川长思鸟来/ 2022年11月25日 13:23/ 0 赞/ 266 阅读

相关【css】让img图片居中显示

1.说明想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏 2.代码 HTML <div id="di

ゝ一纸荒年。/ 2022年10月19日 04:19/ 0 赞/ 238 阅读

相关 DIV+CSS如何让文字垂直居中？

CSS网页布局DIV水平居中的各种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它

不念不忘少年蓝@/ 2022年07月16日 11:47/ 0 赞/ 317 阅读

相关 css垂直居中--img p

因为p标签和img居中的方法我知道的不多就放到一起了！ 1.单行文字的居中很简单一个text-align:center; line-hegight: 父级div的高度。

水深无声/ 2022年07月16日 00:13/ 0 赞/ 230 阅读

相关 css垂直居中--div

面试到css的时候，人们经常会问给你一个div固定宽度. <!DOCTYPE html> <html lang="en"> <head> <

「爱情、让人受尽委屈。」/ 2022年07月15日 23:18/ 0 赞/ 338 阅读

相关 img相对于div垂直居中

<style> em { display:inline-block; } img { height:15px; } </style> <div class="

怼烎@/ 2022年06月14日 09:38/ 0 赞/ 285 阅读

相关 div里的img图片水平垂直居中（解决）

转记！ [实现div里的img图片水平垂直居中][div_img] [div_img]: https://blog.csdn.net/DreamFJ/article/

红太狼/ 2022年05月19日 04:20/ 0 赞/ 188 阅读

相关 DIV+CSS如何让文字垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里

Bertha 。/ 2021年11月29日 05:54/ 0 赞/ 507 阅读

相关实现div里的img图片水平垂直居中

`body`结构 <body> <div> [外链图片转存失败(img-XveH5Msl-1562164037436)(htt

╰半橙微兮°/ 2021年06月26日 16:06/ 0 赞/ 515 阅读