Span标签文本内容垂直居中的操作方法
如下图所示,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; //垂直居中