那么 直接 使用 line-height与设置的height 值相同即可以实现垂直居中，例如:
html中：
然后在css中:
即可实现span中，“这里是文字” 部分文字内容的垂直居中。
比使用padding-top 的兼容性和效果多要好很多。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。
3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。
span元素为内联元素，不具备宽度特性，设置text-align属性会没有效果，因此需要将span元素的展示类型转化为具有块级特性。
方法1：设置span的display属性为block。
<span style="font-size:14pxtext-align:centerdisplay:block">...</span>
方法2：设置span的display属性为inline-block，这种方式需要手动设置span的宽度。
<span style="font-size:14pxtext-align:centerdisplay:inline-blockwidth:500px">...</span>
扩展资料
html标签中根据元素的展示形式，主要分为块元素和内联元素。
块元素特点：
1、总是在新行上开始。
2、高度、行高以及外边距和内边距都可控制。
3、宽度缺省是它的容器的100%，除非设定一个宽度。
4、它可以容纳内联元素和其他块元素。
内联元素特点：
1、和其他元素都在一行上。
2、高度、外边距和内边距不可改变。
3、宽度就是它的文字或图片的宽度，不可改变。
4、内联元素只能容纳文本或者其他内联元素。
参考资料：
百度百科-块元素
百度百科-内联元素
![[Quora] 论如何才能悄无声息地破坏室友的电脑](/aiimages/%5BQuora%5D+%E8%AE%BA%E5%A6%82%E4%BD%95%E6%89%8D%E8%83%BD%E6%82%84%E6%97%A0%E5%A3%B0%E6%81%AF%E5%9C%B0%E7%A0%B4%E5%9D%8F%E5%AE%A4%E5%8F%8B%E7%9A%84%E7%94%B5%E8%84%91.png)
