在网页开发中,经常需要将一些短小的文字或者图标居中显示。其中有一种常用的方式是使用CSS将两行字居中。样式代码如下: .center { display: flex; justify-content:
在网页开发中,经常需要将一些短小的文字或者图标居中显示。其中有一种常用的方式是使用CSS将两行字居中。
样式代码如下: .center { display: flex; justify-content: center; align-items: center; height: 100%; }
其中,使用了flex布局的方式,通过justify-content属性将元素在主轴上居中对齐,align-items属性将元素在交叉轴上居中对齐。这样,无论是文字还是图标,都可以轻松实现居中显示。
在HTML中,只需要将需要居中显示的内容放置在一个容器元素中,并为该元素添加.center类即可:
HTML代码如下: <div class="center"> <p>这是第一行文字</p> <p>这是第二行文字</p> </div>
这样,我们就可以实现将两行字居中显示的效果。
粉丝
0
关注
0
收藏
0