Bootstrap通过定义四个类名来控制文本的对齐风格：

☑   .text-left：左对齐

☑   .text-center：居中对齐

☑   .text-right：右对齐

☑   .text-justify：两端对齐

P.S.：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>文本对齐风格</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/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>

bootstrap 文本对齐风格的更多相关文章

  1. Bootstrap文本对齐风格

    在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑  右对齐,取值r ...

  2. Bootstrap学习笔记之文本对齐风格

    文本对齐风格 在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑   ...

  3. Bootstrap基础--文本对齐风格

    在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑  右对齐,取值r ...

  4. Bootstrap 斜体、文本对齐、缩略图、地址、列表等

    目录1.标题2.页面主体3.强调    a.小号文本    b.着重    c.斜体    d.对齐class    e.强调class4.缩略语5.地址6.列表    a.无序列表    b.有序列 ...

  5. Bootstrap系列 -- 5. 文本对齐方式

    一. 文本对齐样式 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 二. 使用方式 <p class=&q ...

  6. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  7. Bootstrap -- 文本，背景，其他样式

    Bootstrap -- 文本,背景,其他样式 1. 文本样式:展示了不同的文本颜色 使用文本样式: <!DOCTYPE html> <html> <head> & ...

  8. ckeditor文本对齐方式添加，图片上传

    最近用的AdminBSBMaterialDesign-master模板,里边用到了ckeditor编辑器 但发现里边没有基本的文本对齐方式,找了好一会,好多方法都不管用,最后在config.js中添加 ...

  9. sh_18_字符串文本对齐

    sh_18_字符串文本对齐 # 假设:以下内容是从网络上抓取的 # 要求:顺序并且居中对齐输出以下内容 poem = ["\t\n登鹳雀楼", "王之涣", & ...

随机推荐

  1. idea工具常见问题汇总

    1.隐藏idea创建项目自带的文件及文件夹比如.iml和.idea文件夹 Settings→Editor→File Types 在下方的忽略文件和目录(Ignore files and folders ...

  2. C 编译过程浅析

    From where i stand, there are two programmig languages in the world, which is C lang and the other. ...

  3. Hibernate_day02

    一.今天内容 1 实体类编写规则 2 hibernate主键生成策略 (1)native (2)uuid 3 实体类操作 (1)crud操作 (2)实体类对象状态 4 hibernate的一级缓存 5 ...

  4. wpc 双工

    在控制台部署wcf双工 这个可以被silverlight 使用 <?xml version="1.0" encoding="utf-8" ?> &l ...

  5. 寻路优化（二）——二维地图上theta*算法的设计探索

    这篇文章是基于上一篇文章的研究上进行的,使得路径更加的平滑和自然,特此记录.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leonhard-/p/68660 ...

  6. Database学习 - mysql 连接数据库 库操作

    连接数据库 语法格式: mysql -h 服务器IP -P 端口号 -u用户名 -p密码 --prompt 命令提示符 --delimiter 指定分隔符 示例: mysql -h 127.0.0.1 ...

  7. aar jar包打包

    使用Android Studio Module的方式编译出aar和jar包: aar包:打aar包时,gradle compile依赖编译进来的包不会被打到aar包中,所以接入aar的应用仍然需要添加 ...

  8. Mybatis进阶学习笔记——动态代理方式开发Dao接口、Dao层（推荐第二种）

    1.原始方法开发Dao Dao接口 package cn.sm1234.dao; import java.util.List; import cn.sm1234.domain.Customer; pu ...

  9. Software development skills for data scientists

    Software development skills for data scientists Data scientists often come from diverse backgrounds ...

  10. zabbix通过简单命令监控elasticsearch集群状态

    简单命令监控elasticsearch集群状态 原理: 使用curl命令模拟访问任意一个es节点可以反馈的集群状态,集群的状态需要为green curl -sXGET http://serverip: ...