CSS实现图片与文字垂直居中-优快云博客

解决图片和文本在同一行显示时的对齐问题，通过设置图片和文本盒子为行内块元素，并使用vertical-align: middle实现垂直居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当图片和文本在一行的时候显示时效果很奇葩

文字和图片根本对不齐

想让文本对齐在图片垂直居中

这时候一般的方法是图片和文本盒子设置为行内快(inline-block)

图片给高度

文本盒子不要给高度

给他们都设置 vertical-align:middle;

<!doctype html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
        <meta http-equiv="Content-Type" content="textml; charset=utf-8" />
        <!--当前页面的三要素-->
        <title>美女 - 木马老师</title>
        <meta name="Keywords" content="关键词,关键词" />
        <meta name="description" content="描述" />

        <!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0;}
            body{font:14px '微软雅黑'; color:#000;}
            ul{list-style:none;}

            /*  wrap start  */
            .wrap{width:380px;margin:100px;}
            .wrap li{border-bottom:1px solid #ccc;padding:20px 0;}
            .wrap li img{width:90px;height:90px;border:4px solid #ccc;border-radius:50%;display:inline-block;vertical-align:middle;}
            .wrap li div{display:inline-block;width:260px;vertical-align:middle;margin-left:10px;}
            .wrap li img:hover{border-color:#fe9900;}
            h4{padding-bottom:10px;}
            h4:hover,p:hover{color:#fe9900;}
            /*end  wrap*/
        </style>

    </head>
<body>


    <!-- wrap start  -->
    <ul class='wrap'>
        <li>
            <img src="images/1.jpg" alt="meinv"  />
            <div>
                <h4>AmyRoiland</h4>
                <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p>
            </div>
        </li>
        <li>
            <img src="images/1.jpg" alt="meinv"  />
            <div>
                <h4>AmyRoiland</h4>
                <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p>
            </div>
        </li>
        <li>
            <img src="images/1.jpg" alt="meinv"  />
            <div>
                <h4>AmyRoiland</h4>
                <p>「Amy Roiland」美国洛杉矶</p>
            </div>
        </li>
        <li>
            <img src="images/1.jpg" alt="meinv"  />
            <div>
                <h4>AmyRoiland</h4>
                <p>「Amy Roiland」美国洛杉矶 风格复古又新潮，总能在清新、性感和复古中轻松切换。</p>
            </div>
        </li>
    </ul>
    <!-- end wrap -->
</body>
</html>