章节
问答
课签
笔记
评论
占位
占位

文本对齐风格

在排版中离不开文本的对齐方式。在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;
}

例如下面的四行代码,分别定义文本的四种不同的对齐风格:

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

任务

我也来试式:完成下面任务

在右侧代码编辑器中第15行输入正确代码,让文本向右对齐显示:

“给我加个类,我就向右对齐。”

?不会了怎么办

下面是正确代码:

<p class="text-right">给我加个类,我就向右对齐。</p>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 慕粉4091804
<p class="text-info text-center">该段落使用了样式 "text-info"。</p>           

最新回答 / 慕粉6743111
跟word中的两端对齐一样,设置两端对齐可以自动调整文字的水平间距,使其均匀分布在左右页边距之间,使两侧文字具有整齐的边缘。

已采纳回答 / 酷得被雷劈
看好css的链接<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

已采纳回答 / chasonhuang
class="text-danger text-right"

已采纳回答 / 师太手拿开
我也遇到过,一般是css优先级或者父类元素问题,你可以手动css加!important试试

最赞回答 / purple_yao
貌似两端对齐只对英文起作用:<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 o...

+ 我来回答 回答最高可+2积分

最新回答 / qq_面朝大海春暖花开_03687610
这里的text-right是类,是对css样式text-align:right的封装。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言