本文摘自PHP中文网,作者藏色散人,侵删。
html使文字居中的方法:1、通过“text-align:center;”属性设置文字水平居中;2、通过“line-height:height;”属性设置文字垂直居中。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
html文字居中代码具体示例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE HTML>
<html>
<head>
<title>html文字居中测试</title>
<meta charset= "UTF-8" >
<style type= "text/css" >
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div >html文字水平居中</div>
<div >html文字垂直居中</div>
<div >html文字水平上下居中</div>
</body>
</html>
|
以上代码效果在本地测试如下图:
阅读剩余部分
相关阅读 >>
(超好用)Html 颜色选择器的用法
Html5前端是什么?
Html怎么设置style样式
Html怎么给按钮换颜色?Html button标签的使用介绍
Html如何转为word文档格式
Html怎么禁止缓存
runat在Html中表示什么意思
前端工程师需要掌握哪些知识?
Html中怎么把表格居中
Html中的三种布局分别是什么
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html怎样使文字居中