<div class="container"> <div class="logo"></div> <div class="title"> <div class="green">数据中心</div> <div class="red">安全生产数据大屏幕</div> <div class="white">统计分析</div> </div> <div class="icon"></div> </div> 怎么让logo 父级div的最左边展示, green、red、white 居中,icon 靠最右边显示
时间: 2023-08-13 09:58:44 浏览: 56
要实现 logo 在父级 div 最左边展示,green、red、white 居中,icon 靠最右边显示的布局,您可以使用 flex 布局和适当的样式。以下是一个示例代码:
```html
<style>
.container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f2f2f2;
}
.logo {
width: 50px;
height: 50px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.green {
font-size: 12px;
color: green;
}
.red {
font-size: 18px;
color: red;
}
.white {
font-size: 12px;
color: white;
}
.icon {
width: 20px;
height: 20px;
}
</style>
<div class="container">
<div class="logo"></div>
<div class="title">
<div class="green">数据中心</div>
<div class="red">安全生产数据大屏幕</div>
<div class="white">统计分析</div>
</div>
<div class="icon"></div>
</div>
```
在上述示例中,我们使用了 flex 布局来实现子元素的位置和对齐。`.container` 类设置了 `display: flex;`,使其内部的子元素成为 flex 容器。`align-items: center;` 将子元素在垂直方向上居中对齐,`justify-content: space-between;` 将子元素在水平方向上均匀分布。
`.logo` 类设置了 logo 元素的宽度和高度。
`.title` 类设置了标题部分的样式。`display: flex;` 将标题内部的子元素变为 flex 容器,`align-items: center;` 和 `justify-content: center;` 将子元素在水平和垂直方向上居中对齐。`flex-grow: 1;` 让标题部分占据剩余的空间。
`.green`、`.red` 和 `.white` 类分别设置了不同颜色和字体大小的文本样式。
`.icon` 类设置了小图标的宽度和高度。
通过这些样式设置,logo 元素将展示在父级 div 的最左边,green、red、white 文本将居中显示,而 icon 元素将靠最右边显示。您可以根据需要调整样式和内容来实现您的实际需求。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![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)