文字居中的css代码是什么
时间:2021-03-10 来源:互联网
今天PHP爱好者给大家带来文字居中的css代码是“text-align:center;”或“line-”。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;
background: palegoldenrod;
text-align: center
}
</style>
</head>
<body>
<div>css 水平居中了--文本文字</div>
</body>
</html>
效果图:
2、文字垂直居中
line-height 使单行文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
background: palegoldenrod;
line-
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>
效果图:
以上就是文字居中的css代码是什么的详细内容,更多请关注php爱好者其它相关文章!
-
无限暖暖6月上半-奇迹之冠巅峰赛过关建议 2025-06-03
-
无限暖暖最新奇迹之冠-第七场应该怎么通关 2025-06-03
-
燕云六一新活动惊鸿卡-刷无相皇小十七测评 2025-06-03
-
燕云六一鹅童节活动-刷鹅的卡惊鸿卡详细 2025-06-03
-
逆水寒手游育宠保姆级教程-逆水寒怎么捕捉宠物 2025-06-03
-
逆水寒姜却同款群龙之首动画-人机速刷获取 2025-06-03