css 怎么不能, div 下最左边是logo 图片 中间是字体12的“数据中心” 和字体18的安全生产数据大屏幕 和字体12的统计分析,最右边是小图标
时间: 2024-04-13 19:30:43 浏览: 14
要实现您所描述的布局,您可以使用以下 CSS 样式来设置 div 的子元素的位置和样式:
```html
<style>
.container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f2f2f2;
}
.logo {
width: 50px;
height: 50px;
}
.title {
font-size: 12px;
}
.main-title {
font-size: 18px;
font-weight: bold;
}
.subtitle {
font-size: 12px;
}
.icon {
width: 20px;
height: 20px;
}
</style>
<div class="container">
<img class="logo" src="logo.png" alt="Logo">
<div>
<div class="title">数据中心</div>
<div class="main-title">安全生产数据大屏幕</div>
<div class="subtitle">统计分析</div>
</div>
<img class="icon" src="icon.png" alt="Icon">
</div>
```
在上述示例中,我们使用了 flex 布局来实现 div 的子元素的水平对齐和间距调整。`.container` 类设置了 `display: flex;`,使其内部的子元素成为 flex 容器。`align-items: center;` 将子元素在垂直方向上居中对齐,`justify-content: space-between;` 将子元素在水平方向上均匀分布。
`.logo` 类和 `.icon` 类设置了 logo 图片和小图标的宽度和高度。
`.title` 类设置了字体大小为 12px,`.main-title` 类设置了字体大小为 18px,并使用 `font-weight: bold;` 设置为粗体。`.subtitle` 类设置了字体大小为 12px。
您可以根据需要调整样式,并将实际的 logo 图片和小图标替换为适当的图像。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)