<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?
<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
!
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>
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>
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.