Html 垂直对齐图像旁边的文本_Html_Css

Html 垂直对齐图像旁边的文本

html css

Html 垂直对齐图像旁边的文本,html,css,Html,Css,我有一个元素，包含多行，每行以图像开头，后跟文本。我希望文本靠近图像的垂直中心，因此我将其放在一个div a div中，并设置display:inline block和vertical align:middle，但文本仍然位于底部。这是我的密码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UT

我有一个

元素，包含多行，每行以图像开头，后跟文本。我希望文本靠近图像的垂直中心，因此我将其放在一个div a div中，并设置

display:inline block

和

vertical align:middle

，但文本仍然位于底部。这是我的密码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="game.php-Dateien/style.css">
    </head>
    <body>      
        <div style="text-align:left; display:inline-block;">
            <img style="height:8vw" src="myImage.png"><div style="display:inline-block; vertical-align:middle">Some describing text</div><br>
        </div>
    </body>
</html>


一些描述文本

您可以按如下方式指定文本div的高度：

<div style="display:inline-block; vertical-align:middle; height: 8vw;">Some describing text</div>

一些描述文字

您需要将

内联块

和

垂直对齐：中间

设置为两个元素

#详细信息{
显示：内联块；
垂直对齐：中间对齐；
}
.照片{
显示：内联块；
垂直对齐：中间对齐；
高度：80px；
}


一些描述文本

尝试使用flex包装父元素

display: flex;
align-items: center

此代码将子元素水平对齐到中间

请参阅完整代码

.img包装器{
显示器：flex；
对齐项目：居中
}
.wrapper.image{
高度：8vw
}


一些描述文字