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

您可以在文本上使用绝对位置，然后使用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>

它将在文本的右上角设置文本。

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

4 个答案: