Question

我想显示一个图像，该文本的顶部对齐，并且居中。

这是HTML：

div{
    vertical-align: top;
}

h4{
    display: inline-block;
}

<div>
    <img src="https://placehold.it/60x60">
   <h4>This is header</h4>
   <br>
   <span>This is line 1 </span>
   <br>
   <span>This is line 2</span>
</div>

以下是查看和测试的小提琴： https://jsfiddle.net/karhu726/1/

如何解决此问题？

Answer 1

您可以使用CSS display: inline-block并将文本包装在div中。这样会将其与图像对齐，但与内容高度不匹配。

.descrip{
  display: inline-block;
}

<div align='center'>
  <img style="vertical-align:top" src="https://placehold.it/60x60">
<div class="descrip">
  <h4>This is header</h4>
   <span style="">This is line 1 <br /> This is line 2</span>
   <span style="">This is line 3 <br /> This is line 4</span>
</div>

</div>

Answer 2

像这样吗？

     <div style="width:30vw; margin-left:35vw">
         <img style="vertical-align:top; float:left" src="https://placehold.it/60x60">
         <span style="">This is line 1<br />This is line 2</span>
     </div>

Answer 3

您可以使用类似这样的东西。我建议将CSS拆分为一个单独的文件，不要使用内联样式。您可以使用类的元素作为目标并为其设置样式。

希望这会有所帮助。

.wrapper {
  text-align: center;
}

.image-text {
  text-align: center;
  display: block;
}

.image {
  max-width: 100%;
  height: auto;  
}

<div class="wrapper">       
    <img class="image" src="https://placehold.it/60x60" alt="">
    <span class="image-text">This is line number 1 <br> This is line 2</span>
</div>

Answer 4

与标签不同，的默认display值为inline。这意味着它将不会低于前一个DOM元素。

正如其他人指出的那样，您需要覆盖标签的CSS来制作display:inline-block，或者只是切换到标签。可能会给标记一个类名，以便您可以进一步对其进行操作（例如其间距，边距和填充）。

此外，您的代码：

   <span style="">This is line 1 <br /> This is line 2</span>
   <span style="">This is line 3 <br /> This is line 4</span>

您已将 标记放在标记本身之内而不是其外部。如果您想走这条路线，则需要将其放在外面

  <h4>This is header</h4><br />
       <span style="">This is line 1</span><br />
       <span style="">This is line 2</span><br />
       <span style="">This is line 3</spam><br />
       <span style="">This is line 4</span><br />

<br>之后，新行进入图像下方

4 个答案: