4、文本对齐

最新推荐文章于 2023-08-04 03:29:00 发布

来杯茶的ni

最新推荐文章于 2023-08-04 03:29:00 发布

阅读量638

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/QilanAllen/article/details/106223353

版权

Bootstrap 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

左对齐，取值left
居中对齐，取值center
右对齐，取值right
两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

具体源码查看bootstrap.css文件第488行~第499行：

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}

应用：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐风格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>


</body>
</html>

来杯茶的ni

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
4、文本对齐

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：左对齐，取值left 居中对齐，取值center 右对齐，取值right 两端对齐，取值justify为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐具体源码查看bootstrap.css文件第488行~第
复制链接

扫一扫