行内元素垂直居中方法

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>



猜你喜欢

转载自blog.csdn.net/just_for_your_smile/article/details/54377315