在圖像旁邊的 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>

所以我有上面的圖片，旁邊有一個文字。 問題是我希望它旁邊的文本不是出現在右下角，而是出現在圖像的右中/右上角，圖像和文本之間有一些空間。 我怎樣才能實現它？

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>

通過添加vertial-align:middle解決了它！

Answer 2

您可以在文本上使用 position absolute，然后使用 top 屬性將文本對齊到您想要的任何位置。

例子：

 <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

您可以通過在父級中使用 flex 來實現它。 只需設置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>

它會將您的文本設置在圖像的右上角。