前面提到text-indent属性,用来实现文本的缩进,今天的text-align使用率可比文本缩进高的多。拿自己现在做的项目上来说,水平居中和垂直居中估计是用到最多了,那我们就先看看它的语法吧!

text-align

允许值 left| center | right | justify |

初始值 与用户代理有关

可否继承 是

适用于 块级元素

text-align是另一个只适应于块级元素的属性,如果你想居中某行中的一个链接或者图片,而不管行中剩余部分的对齐方式是行不通的。我们先通过下图整体
感受下text-align的效果。

这里是text-align的四个属性值展示图片

 

上面的展示展示很直观的展现了text-align的属性规则,对于最后一个属性text-align:justify在每个浏览器的表现不太一致,个人感觉所以jusity的应用场景还是不太多,

应用场景:

1.文字对齐方式:这就看UI的图是怎么设计情况,一句话,按设计来就行。

2.图片的居中对齐:我们单独对img使用text-align是没有效果的,别忘了,text-align只能用于块级元素,不适用于行内元素和非替换元素的。所以我们要使图片居中需要改造一下

方案:<div style="text-align:center"><img src="" alt="" /></div>

关于text-align的粗浅探讨就到这里了,大家自己去多尝试尝试。

css常用属性总结:文本属性中的text-align的更多相关文章

  1. CSS字体属性与文本属性

    CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...

  2. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  3. css 01-CSS属性:字体属性和文本属性

    01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...

  4. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  5. CSS中的字体属性和文本属性

    1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...

  6. CSS简介,基础选择器,字体属性,文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  8. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  9. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  10. [转载]CSS教程--字体与文本属性

    b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...

随机推荐

  1. New Concept English Two 20 52

    $课文50  乘车兜风 510. I love travelling in the country, but I don't like losing my way. 我喜欢在乡间旅行,但却不愿意迷路. ...

  2. 使用C++实现二叉搜索树的数据结构

    需要注意的地方: ①二叉搜索树删除一个指定结点R,若R为叶子结点,则将R的父结点中指向R的指针改为指向nullptr:若R的左右子结点一个为空,一个非空,则将R的父结点中指向R的指针改为指向R的非空子 ...

  3. Windows下MySQL多实例运行

    1.正常安装Windows版的MySQL,例如安装在C:\Program Files\MySQL文件夹里: 2.按照常规配置好MySQL: (注:5.6版本的 data文件夹与 my.ini文件在C: ...

  4. BZOJ1568: [JSOI2008]Blue Mary开公司【李超树】

    Description Input 第一行 :一个整数N ,表示方案和询问的总数. 接下来N行,每行开头一个单词"Query"或"Project". 若单词为Q ...

  5. 用eclipse来运行带参数的命令行程序,配置命令行程序的参数

    以上从网上找了点资料:右键点主类名 --> 运行--> 打开运行对话框--> Main(主类)--> 右边Arguments(参数) 点他以后然后在下面Program argu ...

  6. zipkin:HttpClient和struts

    因为要和老系统集成zipkin,意外的发现老系统使用的httpClient来发送信息.zipkin的官方demo可都是retstTemplate啊!有的搞头. 在看Demo的时候意外的发现其实其实2. ...

  7. 基数排序算法-python实现

    #-*- coding: UTF-8 -*- import numpy as np def RadixSort(a): i = 0 #初始为个位排序 n = 1 #最小的位数置为1(包含0) max ...

  8. 【python】函数名存在变量中

    变量函数:意思就是将函数名存在变量中,然后根据变量值动态的调用需要的函数. LOGIN = 'xxxx' PASSWD = "xxx" URL = 'xxxxx' def hand ...

  9. oracle的热备份和冷备份

    一.冷备份介绍:    冷备份数据库是将数据库关闭之后备份所有的关键性文件包括数据文件.控制文件.联机REDO LOG文件,将其拷贝到另外的位置.此外冷备份也可以包含对参数文件和口令文件的备份,但是这 ...

  10. 黄聪:360浏览器、chrome开发扩展插件教程(1)开发Chrome Extenstion其实很简单

    转载:http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是 ...