在图像旁边的 div 中对齐文本，但垂直居中

Question

 <div> <div style='display:inline'> <img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI@._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px> </div> <div style='display:inline'> Twin Peaks </div> </div>

So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?

Answer 1

 <div> <div style='display:inline'> <img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI@._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px> </div> <div style='display:inline'> Twin Peaks </div> </div>

Solved it by adding vertial-align:middle !

Answer 2

You can use position absolute on the text and then align the text anywhere you want using the top property.

Example:

 <div> <div style='display:inline'> <img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI@._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px> </div> <div style="display:inline; position:absolute;"> Twin Peaks </div> </div>

Answer 3

You can achieve it by using flex in the parent. Just set align-items: center

 <div style="display: flex; align-items: center;"> <div> <img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI@._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px> </div> <div style="margin-left: 10px;"> Twin Peaks </div> </div>

Answer 4

 <div> <div style="float: left;"> <img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI@._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" /> </div> <div style="float: left; margin-left: 10px;"> Twin Peaks </div> </div>

It'll set your Text top right side of your image.