css将文本和图片放在同一行

在网页设计中，经常会出现需要将文本和图片放在同一行的情况。这时候，CSS的行内元素和块级元素的应用就显得特别重要了。 我们可以使用CSS将图片和文本放在一起，让网页的排版更加美观。下面是一些需要注意的CSS代码和方法： 1. 将图片和文本都放在一个div里面，然后将其设置为display:inline;就可以将它们放在同一行了。代码如下：

div {
  display: inline;
}

<div>这里是文字<img src="picture.jpg" alt="picture" /></div> 2. 如果希望图片和文本都垂直居中，我们可以使用vertical-align属性。代码如下：

img {
  vertical-align: middle;
}

<p><img src="picture2.jpg" alt="picture2" />这里是文字</p> 3. 如果我们希望图片和文本的间隔更小，我们可以使用text-indent属性。代码如下：

p {
  text-indent: -20px;
}

img {
  margin-right: 20px;
}

<p><img src="picture3.jpg" alt="picture3" />这里是文字</p> 4. 我们也可以使用float属性将图片和文本放在同一行。代码如下：

img {
  float: left;
  margin-right: 20px;
}

p {
  overflow: hidden;
}

<img src="picture4.jpg" alt="picture4" /><p>这里是文字</p> 总之，使用CSS将文本和图片放在同一行是一个比较基础的网页排版技巧，但是它的应用场景非常广泛。以上几种方法可以根据实际情况来选择，希望这篇文章对您有所帮助。