领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

「测试开发全栈-HTML」(13)css字体文本对齐和文本装饰

nixiaole 2024-11-09 14:24:12 知识剖析 23 ℃

上午说了CSS字体的颜色属性，下午来说下字体的文本对齐text-align和文本装饰text-decoration

text-align属性用于设置元素内文本内容的水平对齐方式。语法规则如下:

div {

text-align:center;

}

除了有center属性外，还有另外两个属性:

left 左对齐(默认值)

right 右对齐


先看下居中效果:

对应代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

text-align: center;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


然后是文案左对齐，看下效果:

对应代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

text-align: left;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


最后是右对齐，看下效果:

对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

div {

text-align: right;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


如果不写文字对齐的属性，看下默认应该都是左对齐，效果如下:

对应代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/* div {

text-align: right;

} */

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>

可以看到已经将text-align代码注释掉了，默认展示就是左对齐


今天先到这里，大家学习工作辛苦了~

Tags：

猜你喜欢

最近发表
标签列表