首页将文字和两个图片放在header标签里，图片居于行两侧

将文字和两个图片放在header标签里，图片居于行两侧

时间: 2024-10-19 16:11:38 浏览: 32

要在HTML中创建一个包含文字和左右对齐图片的header，可以使用`<header>`标签，并结合`<div>`元素以及CSS样式来实现。下面是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .header-container { display: flex; justify-content: space-between; /* 图片水平居中 */ align-items: center; /* 文字垂直居中 */ padding: 10px; /* 添加一些间距 */ background-color: #f8f9fa; /* 可选背景颜色 */ height: 150px; /* 定义header高度 */ } header img { width: auto; /* 自适应宽度，保持图片比例 */ max-width: 200px; /* 如果图片过大，则限制最大宽度 */ } </style> </head> <body> <header class="header-container">  <h1>这里是标题文字</h1>  <img src="left-image.jpg" alt="左侧图片描述">  <img src="right-image.jpg" alt="右侧图片描述"> </header> </body> </html> ``` 在这个例子中，`.header-container`类设置了Flex布局，使得图片在一行上水平居中对齐，而文本则会自动在其下方垂直居中。记得替换`src`属性为你实际的图片路径。

阅读全文