首页HTML5怎么把图片和文字放到同一行

HTML5怎么把图片和文字放到同一行

时间: 2024-12-29 07:31:21 浏览: 15

在HTML5中，将图片和文本放在同一行通常可以使用`<figure>`、`<figcaption>`标签，或者简单的`<div>`元素配合CSS来布局。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .content { display: flex; /* 使用Flexbox布局 */ align-items: center; /* 图片和文字居中对齐 */ } img { margin-right: 10px; /* 如果需要，你可以添加间距 */ } </style> </head> <body> <div class="content"> <img src="your-image-url.jpg" alt="图片描述">  这是一段文字描述 </div> </body> </html> ``` 在这个例子中，`.content`类设置了`display: flex`使得内容变为弹性盒子模型，`align-items: center`使图片和文字在垂直方向上居中对齐。如果你的图片是绝对定位的，记得将`position`属性设置为`relative`或`absolute`，以便`figcaption`或其他内联元素能正确附着。

阅读全文