html 图片居中_任意高度图片与文字第一行的垂直居中展示

最新推荐文章于 2022-09-20 20:38:26 发布

weixin_39878991

最新推荐文章于 2022-09-20 20:38:26 发布

阅读量254

点赞数

文章标签： html 图片居中 html图片居中 html文字垂直居中 input文字垂直居中 javafx设置label文本居中 listwidget设置条目文本居中

一句话总结

通过给图片设置flex-start上对齐，然后在图片旁边加入一个看不见的字，将该字设置成和文本大小一致并隐藏，用这个看不见的字撑起图片高度的垂直居中。

常见图文混排布局

一、单/多行文字+icon垂直居中

效果如图：

图片比文字大

图片比文字小

图片对齐多行文字

<!DOCTYPE html>

二、图片居中对齐多行文字中的第一行

对齐第一行文字的腰部

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .father{
            display: flex;
            align-items:flex-start;;
            font-size: 100px;;

        }
        .icon-container{
            display: flex;
            align-items: center;;
        }
        .hidden{
            width:0;
            /* 这里可以用 visibility:hidden等方法 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="icon-container">
            <img src="https://p0.meituan.net/travelcube/602782cdcbae46b3506583cb5c228cd3507.png" />
            <span class="hidden">无</span>
        </div>
        <div class="text">
            文本内容文本内容文本内容文本内容
        </div>
    </div>
</body>

</html>

weixin_39878991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 图片居中_任意高度图片与文字第一行的垂直居中展示

一句话总结通过给图片设置flex-start上对齐，然后在图片旁边加入一个看不见的字，将该字设置成和文本大小一致并隐藏，用这个看不见的字撑起图片高度的垂直居中。常见图文混排布局一、单/多行文字+icon垂直居中效果如图：图片比文字大图片比文字小图片对齐多行文字<!DOCTYPE html>二、图片居中对齐多行文字中的第一行对齐第一行文字的腰部<!DOCTYPE html>...
复制链接

扫一扫