• 技术文章 >web前端 >css教程

    文字居中的css代码是什么

    青灯夜游青灯夜游2021-03-09 10:55:22原创7670

    文字居中的css代码是“text-align:center;”或“line-height:值;”。text-align属性规定元素文本的水平对齐方式,当值为center时,即可实现水平居中;而设置line-height可实现文字垂直居中。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css 文字居中

    1、文字水平居中

    text-align 属性规定元素中的文本的水平对齐方式,当值为center时可实现水平居中。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			div {
    				width: 300px;
    			    height: 200px;
    			    background: palegoldenrod;
    				text-align: center
    			}
    		</style>
    	</head>
    
    	<body>
    		<div>css 水平居中了--文本文字</div>
    	</body>
    
    </html>

    效果图:

    1.png

    【推荐教程:CSS视频教程

    2、文字垂直居中

    line-height 使单行文字垂直居中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css 垂直居中</title>
    		<style>
    			.box{
    				width: 300px;
    			    height: 300px;
    			    background: palegoldenrod;
    			    line-height:300px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">css 垂直居中了--文本文字</div>
    	</body>
    </html>

    效果图:

    2.png

    更多编程相关知识,请访问:编程视频!!

    以上就是文字居中的css代码是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML css 文字居中
    上一篇:css 多种背景的使用场景和技巧以及好处 下一篇:css怎么选择所有子元素
    千万级数据并发解决方案

    相关文章推荐

    • css怎么将鼠标变小手样式• css字体颜色的设置方法• jquery怎么添加css样式• 你可能不了解的CSS网格函数!• css怎么让两个div在同一行显示
    1/1

    PHP中文网