问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这种图片垂直居中对齐是什么原理？

头像
tommyee
    5711529

    <!DOCTYPE html>
    <html>
    <head>

    <title></title>

    </head>
    <body>
    <div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
    <img alt="" src="https://www.baidu.com/img/bai...; style="display: inline-block; vertical-align: middle;" />
    </div>
    </body>
    </html>

    1、在父元素上设置行高（一般不应该都是设置子元素行高等于父元素高吗，图片可能没有行高所以无效？）
    2、img中设置vertical：middle！在w3c的说明中如下图图片描述

    上面写按照该元素所在行的基线垂直对齐，下面又说把次元素放置在父元素的中部！（单独在img上写vertical-align不能垂直居中）

    我已经迷茫了！所以这个line-height和vertical-align到底是怎么用！

    ps、其它的什么display：table；和绝对定位之类的不用和我说了。我知道！我只想知道上面这代码怎么解释~

    csshtml5html
    阅读 2.1k
    2 个回答
    得票最新
    头像
    北堂棣
      6.6k94268
      ✓ 已被采纳
      头像
      XboxYan
        18.2k93790

        这个vertical-align需要多个元素才能实现居中效果，单个元素是不起作用的，并且是inline-block

        比如：

        <style>
    .box i{ display:inline-block; width:10px; height:100px; background:red; vertical-align:middle; }
    .box img{ vertical-align:middle; }
</style>
<div class="box">
    <i></i>
    <img>
</div>

        这样的话，图片和i标签是垂直居中的

        利用这个原理，可以简化一下，用伪元素来实现垂直居中

        <style>
    .mfix:before{content:'';display:inline-block; width:0; height:100%; vertical-align:middle;}
    .mfix>*{display:inline-block;vertical-align:middle;}
</style>
<div class="box mfix">
    <img>
</div>

        给父级加一个mfix类名就可以实现子元素垂直居中了

        完整demo代码

        https://codepen.io/xboxyan/pe...

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题