首页<p>内文字上方还有标题，然后让图片和文字都位于页面的中间

<p>内文字上方还有标题，然后让图片和文字都位于页面的中间

时间: 2024-10-25 19:11:13 浏览: 23

如果你想在页面中央同时展示一个带有标题的文字和图片，可以使用类似下面的做法：在HTML结构上，你可以这样组织： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>页面标题</title> <style> .content-container { display: flex; align-items: center; /* 让内容垂直居中 */ justify-content: center; /* 让内容水平居中 */ height: 100vh; /* 高度覆盖整个视口高度 */ } .heading { font-size: 24px; margin-bottom: 1rem; } .image-and-text { text-align: center; } </style> </head> <body> <div class="content-container"> <h1 class="heading">这是你的标题</h1> <div class="image-and-text"> <img src="your-image-url" alt="图片描述" class="image-centered"> <p class="image-and-text">这是你的正文内容</p> </div> </div> </body> </html> ``` 这里，`.content-container`负责定位所有内容，`.heading`用于放置标题，`.image-and-text`用于包裹图片和文本，它们都被设置为`display: flex`并居中对齐。 CSS部分会确保标题和图片文字都在屏幕中心显示。记得替换`your-image-url`为你实际的图片URL。

阅读全文