<a href="" class="hywj"> <i class="fa fa-file-pdf-o"></i> <span>科技会议资料</span> </a>让这段代码上下排列
时间: 2023-08-13 11:10:00 浏览: 53
可以使用CSS中的flexbox来实现上下排列。代码如下:
HTML代码:
```html
<a href="" class="hywj">
<i class="fa fa-file-pdf-o"></i>
<span>科技会议资料</span>
</a>
```
CSS代码:
```css
.hywj {
display: flex;
flex-direction: column;
align-items: center;
}
.hywj i {
margin-bottom: 10px;
}
```
这段CSS代码将`.hywj`元素设为flex容器,使其内部的元素按照垂直方向排列。`align-items: center`将元素水平居中对齐,而`i`元素的`margin-bottom`属性则用于在图标和文本之间添加一定的间距。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)