我不能正确地将图片和文字内联

Question

如何在不扰乱其他内容的情况下将文字放在图片旁边？

这是一个标题

的HTML

 <div>
    <img src="logo.ico" width="300px" height="200px" alt="logo"/>
    <h1 class="header">Movies19</h1>
 </div>

Answer 1

您可以将div中的两个元素添加到display:inline-block标记

＆＃13;

＆＃13;

.line>* {
  display: inline-block;
}
h1 {
  vertical-align: middle;
  height: 200px;
  margin: 0;
}

＆＃13;

<div class="line">
  <img src="http://placehold.it/300x200" width="300px" height="200px" alt="logo" />
  <h1 class="header">Mo</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此

<style type="text/css">
   img {
    display: inline-block;
   }
</style>

看看这个链接可能会有所帮助： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_default_css

Answer 3

＆＃13;

＆＃13;

<div>
<table>
<tr>
<td>
    <img src="logo.ico" width="300px" height="200px" alt="logo" />
	</td>
	<td>
    <h1 class="header">Movies19</h1>
	</td>
	</tr>
	</table>
 </div>

＆＃13;

＆＃13;

＆＃13;