在利用HTML+CSS进行页面设计时,可能会遇到如何让字体居中显示,这个居中分为垂直居中和水平居中。那么,具体怎么设置css字体居中呢?
工具/原料
1
HTML5
2
CSS3
3
HBuilderX
4
截图工具
5
浏览器
6
WPS
方法/步骤
1
双击打开HBuilderX开发工具,创建一个Web项目,并在项目pages文件夹下,新建静态页面center.html
2
打开center.html文件,修改title标签中的文本显示内容
3
在
标签中,插入一个div标签,并添加标签的id属性4
利用ID选择器在style标签中,设置div标签的样式属性,如宽度、高度、行高、字体属性等
5
保存代码并运行Web项目,打开浏览器预览效果,但是不知道字体是否居中
6
返回到HBuilderX工具,给div标签添加一个样式属性background-color
7
再次保存代码并刷新浏览器,可以看到字体在背景颜色块中间位置,说明字体居中显示
总结
字体居中text-align: center;line-height: height;END
注意事项
1
注意css中字体居中如何设置
2
注意如何设置垂直居中和水平居中
上一篇:div内容垂直居中的方法
下一篇:DIV垂直水平居中