[分享]css中如何设置文字与图片在同一行显示

在网页设计中，我们经常遇到需要在同一行显示文字和图片的情况。这时我们就需要使用CSS来实现。以下简单介绍几种常见的实现方式。1. 使用浮动我们可以将图片设置为浮动，使其“脱离文档流”，从而让文字和图片...

在网页设计中，我们经常遇到需要在同一行显示文字和图片的情况。这时我们就需要使用CSS来实现。以下简单介绍几种常见的实现方式。
1. 使用浮动
我们可以将图片设置为浮动，使其“脱离文档流”，从而让文字和图片在同一行显示。代码如下：

p {
  overflow: hidden; /* 清除浮动导致的高度塌陷问题 */
}
img {
  float: left; /* 设置图片浮动 */
  margin-right: 10px; /* 设置图片与文字的间距 */
} 

2. 使用flex布局
flex布局是CSS3中新增加的一种布局方式，它可以方便地实现元素的弹性布局。我们可以将文字和图片放在一个容器中，然后使用flex布局来实现同一行显示。代码如下：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}
img {
  margin-right: 10px;
} 

3. 使用inline-block
我们也可以将文字和图片设置为inline-block元素，使它们在同一行水平排列。代码如下：

p {
  font-size: 0; /* 清除inline-block间距，需要在p元素上设置为0 */
}
img,
span {
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
} 

总之，以上几种方法都可以完成文字和图片在同一行显示的效果。需要根据具体情况选择合适的方法。