Question

我有一个<div>元素，其中包含多行，每行以图片开头，后跟文本。我希望文本位于图像的垂直中心附近，因此我将其放在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>

Answer 1

您可以像这样将文本div的高度设置为

：

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

Answer 2

需要同时为两个元素都设置inline-block和vertical-align:middle。

#details {
  display: inline-block;
  vertical-align: middle;
}

.photo {
  display: inline-block;
  vertical-align: middle;
  height: 80px;
}

<!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 class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRUAw0HcxEZPm8MszHiaYlfFspctjw3xAs1xBma-8M5hMpKQJE">
    <div id="details">Some describing text</div><br>
  </div>
</body>

</html>

Answer 3

尝试使用flex包装父元素。

display: flex;
align-items: center

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

查看完整代码。

.img-wrapper{
display: flex;
align-items: center
}
.wrapper .image {
height:8vw
}

<!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 class="img-wrapper">
            <img class="image" src="https://www.gstatic.com/webp/gallery3/1.sm.png">
            <span class="text">Some describing text</span>
        </div>
    </body>
</html>

在图像旁边垂直对齐文本

3 个答案: