行内元素垂直居中方法

最新推荐文章于 2025-02-05 08:36:06 发布

just_for_your_smile

最新推荐文章于 2025-02-05 08:36:06 发布

阅读量1k

点赞数

分类专栏： html 与 css 与js 与jquary

本文链接：https://blog.youkuaiyun.com/just_for_your_smile/article/details/54377315

版权

html 与 css 与js 与jquary 专栏收录该内容

11 篇文章

订阅专栏

1. 块状元素居中

<div style="position: relative;height: 600px;width: 400px;border: 1px solid #000000">
    <div style="height: 200px;width: 20px;background-color: red;top: calc(50% - 100px);position: absolute">
    </div>
</div>

2.inline-block 元素内图片居中（使用flex模型）

<div style="display: flex;flex-direction: row;align-content: center;height: 100px;justify-content: center;align-items: center; border: 3px solid red;">
    <div style="flex-grow: 1">
        <img src="../images/order/57/new_first.png" style="height: 30px;width: 20px;">
    </div>

    <div style="flex-grow: 90">
        <img style="height: 40px; width: 40px;" src="../zzz/1.jpg">
    </div>
</div>