CSS基础（十）-- 边框及其他样式之让字体居中

最新推荐文章于 2024-05-14 11:13:25 发布

ancan9144

最新推荐文章于 2024-05-14 11:13:25 发布

阅读量716

点赞数

原文链接：http://www.cnblogs.com/lirongyang/p/11303372.html

版权

随笔记录方便自己和同路人查阅，学习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>

效果：

转载于:https://www.cnblogs.com/lirongyang/p/11303372.html

ancan9144

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（十）-- 边框及其他样式之让字体居中

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。#------------------------------------------------我是可耻的分割线-------------------------------------------<!DOCTYPE html><html lang="en"><head&g...
复制链接

扫一扫