使用重构的方式制作出一个水平、垂直都居中短边为50px,长边为150px的红色十字架,要求使用3个div,并且写出完整代码
时间: 2024-02-26 15:59:07 浏览: 26
好的,以下是代码,使用了flexbox布局实现居中对齐:
```html
<div class="container">
<div class="cross-horizontal"></div>
<div class="cross-vertical"></div>
<div class="center-dot"></div>
</div>
```
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.cross-horizontal,
.cross-vertical {
position: absolute;
height: 50px;
background-color: red;
}
.cross-horizontal {
width: 150px;
}
.cross-vertical {
width: 50px;
}
.center-dot {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
top: 20px;
left: 70px;
}
```
其中,`.container`是整个图形的容器,使用flexbox实现水平和垂直居中。`.cross-horizontal`和`.cross-vertical`是水平和垂直的线段,使用绝对定位实现。`.center-dot`是中心的小圆点,也是使用绝对定位实现。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)