CSS基础(十)--边框及其他样式之让字体居中
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
CSS基础(⼗)--边框及其他样式之让字体居中
随笔记录⽅便⾃⼰和同路⼈查阅,学习CSS时最好先学会HTML。
#------------------------------------------------我是可耻的分割线-------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<div class="c1 c2" style="border:1px solid red; width:50%; height:100px; font-size:30px; text-align:center;"> nihaone</div>
</body>
</html>
效果:
text-align:center;其中text-align表⽰设置字体位置center表⽰中间,这种只能⽔平居中,不能上下居中,有⼀个⽐较好的办法,见下⾯代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<div class="c1 c2" style="
border:1px solid red;
width:50%;
height:100px;
font-size:30px;
text-align:center;
line-height:100px;
"> nihaone</div>
</body>
</html>
效果:
line-height:100px;表⽰把字体放到100px中间,这个数要和⾼度⼀致,不然格式就错了⽐如⾼40px,你把字体放到100px居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<div class="c1 c2" style="
border:1px solid red;
width:50%;
height:400px;
font-size:30px;
text-align:center;
line-height:100px;
"> nihaone</div>
</body>
</html>
效果:。