Vertical align text next to image

Question

i have a <div> element containing multiple lines, each starting with an image, followed by text. I want the text to be next to the vertical center of the image, so i put it inside a div a div and set display:inline-block and vertical-align:middle, but the text is still at the bottom. here is my code:

<!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>

score 0 · Answer 1 · answered Sep 10 '18 at 10:56

0

You can give height to your text div like this:

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

answered Sep 10 '18 at 10:56

Nitesh Saxena

199
15

score 0 · Answer 2 · answered Sep 10 '18 at 10:58

Yoy need set inline-block and vertical-align:middle to both of the element.

#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>

score 0 · Answer 3 · answered Sep 10 '18 at 11:02

Try using flex to wrap the parent element.

display: flex;
align-items: center

This code aligns the child elements horizontally to the middle.

See the full code.

.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>

Vertical align text next to image

3 Answers3