Span标签文本内容垂直居中的操作方法

overme2个月前 (10-17)网页设计121

如下图所示,Span标签中插入了一个简单的文本内容,但是该文本内没有垂直居中显示。

span元素是内联元素(行内元素), 不可以进行块状元素的操作。

span标签居中显示的正确方法

CSS操作方法:
首先给Span加上块状属性display:block,然后设置宽、高,否则不能居中显示

<span style=”text-align: center”>水平居中</span>
<span style=”line-height:值为span的高度”>垂直居中</span>

将line-height设置与Height一样高,就能实现垂直居中。

利用flex布局,实现span内容垂直居中

display:flex;
justify-content:center; //水平居中
align-items:center; //垂直居中

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。