首页div中图片和文字上下居中

div中图片和文字上下居中

时间: 2024-09-19 14:02:07 浏览: 48

在HTML中，如果你想让div内的图片和文本上下居中对齐，可以结合CSS样式实现。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; align-items: center; /* 上下居中 */ justify-content: center; /* 左右居中 */ height: 100%; /* 如果有滚动条，你可以设定一个高度 */ min-height: 100vh; /* 或者使用视口的高度，确保内容填充整个屏幕 */ } .image-text-container { position: relative; /* 图片定位需要相对于容器 */ } .centered-image { max-width: 100%; height: auto; /* 避免拉伸图片，保持原始比例 */ margin-bottom: auto; /* 文字下方留空，自动居中 */ } </style> </head> <body> <div class="container"> <div class="image-text-container"> <img src="your_image_url" alt="图片描述" class="centered-image"> <p class="centered-text">这是居中的文字描述</p> </div> </div> </body> </html> ``` 在这个例子中，`.container` 使用了 `flexbox` 属性来实现居中，`.image-text-container` 设置了相对定位，以便调整图片的位置。`.centered-image` 和 `.centered-text` 分别设置了图片和文字在水平方向上居中。

阅读全文