css常用属性总结:文本属性中的text-align
前面提到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的更多相关文章
- CSS字体属性与文本属性
CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- css 01-CSS属性:字体属性和文本属性
01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...
- css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- CSS中的字体属性和文本属性
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- [转载]CSS教程--字体与文本属性
b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...
随机推荐
- DOM之一些小实验demo
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 【转】socket 通信简介
转自:http://blog.csdn.net/xiaoweige207/article/details/6211577/ “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是 ...
- L193
Real generosity toward the future lies in giving all to the present.将一切奉献给当下,就是对未来的真正慷慨.The wheels o ...
- spring MVC 使用 modelAndView.setViewName("forward:*.action") 发送重定向
1.Servlet重定向forward与redirect: 使用servlet重定向有两种方式,一种是forward,另一种就是redirect.forward是服务器内部重定向,客户端并不知道服务器 ...
- php中require_once与include_once的区别
首先include_once仅包含文件一次,如果没有文件,会发出警告,并继续执行. 而require_once也是仅包含文件一次,但是如果程序中没有找到文件,则程序会中止执行.
- flow 编写flow-typed 定义(官方文档)
此为官方文档,因为墙的问题,记录下来: Before spending the time to write your own libdef, we recommend that you look to ...
- VMware 11 安装 Mac OS X10.10
一.下载好以下软件--->http://pan.baidu.com/s/1qWDkTbe 1,VMware 11 2,unlocker203(装好VMware11后需要安装补丁unlocker才 ...
- oracle 查版本号
oracle是强大的数据库,我们怎样看它的版本呢? 工具/原料 oracle 数据库, sqlplus 方法/步骤 首先进入sqlplus,cmd---plsql,登陆我们的用户,如:user/pas ...
- HTTP请求中的form data,request payload,query string parameters以及在node服务器中如何接收这些参数
http://www.cnblogs.com/hsp-blog/p/5919877.html 今天,在工作(倒腾微信小程序)的时候,发现发送post请求到node后台服务器接收不到前端传来的参数.其实 ...
- 如何ping别人的计算机名来获取IP?
来源:http://blog.csdn.net/qq_27109081/article/details/47128175 如何ping别人的计算机名来获取IP? 获取别人的IP, ...