在网页设计中,我们经常遇到需要在同一行显示文字和图片的情况。这时我们就需要使用CSS来实现。以下简单介绍几种常见的实现方式。1. 使用浮动我们可以将图片设置为浮动,使其“脱离文档流”,从而让文字和图片
p { overflow: hidden; /* 清除浮动导致的高度塌陷问题 */ } img { float: left; /* 设置图片浮动 */ margin-right: 10px; /* 设置图片与文字的间距 */ }
.container { display: flex; align-items: center; /* 垂直居中 */ } img { margin-right: 10px; }
p { font-size: 0; /* 清除inline-block间距,需要在p元素上设置为0 */ } img, span { display: inline-block; vertical-align: middle; /* 垂直居中 */ }
粉丝
0
关注
0
收藏
0