css - 如何实现图片和两行文字在一行显示

问题描述

问 题

左侧有一个图片，右侧用两行文字，图片和文字都垂直居中显示？如何布局？

解决方案

给你个例子- -

html

   <div class="wrap">
        <img src="images/ico.png" alt="">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>
    </div>

css

.wrap {
/* 可无需设置高度，靠图片高度 或者 文字的上下padding撑开高度 */
    border: 1px solid;
    width: 600px;
    text-align: center;
}
.wrap span{
    display: inline-block;
    vertical-align: middle;
    padding: 20px 0; /* 撑开高度 */
}
.wrap img{
    width: 10px;
    height: auto;
    vertical-align: middle;
}

其实多行居中分很多情况的- -只有行内元素，只有行内替换元素，行内与行内替换混合，建议去好好看看vertical-align与基线相关资料。

就楼主这个需求，还有其他更容易的实现方式，比如：

1、flex弹性盒子（移动端）

2、使用表格布局

这篇关于css - 如何实现图片和两行文字在一行显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！