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 ...
随机推荐
- C++ 类型转换的特殊用法
C++ 类型转换的特殊用法 下面是ossimLsrRay.h中的一个例子 /*! * CASTING OPERATOR: ossimEcefRay() * Looks like a construct ...
- C# 简单生成双色球代码
红球篮球产生代码 public class TestD { //产生几组数据 public void getzhu( int num) { ; m < num; m++) { getred(); ...
- Scrum立会报告+燃尽图(3)选题
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2193 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...
- 接口测试Fiddler实战20150921
(写好的文章被不小心删掉了,现在补一篇) 项目背景: 1.接口URL:http://192.168.xx.xx:8080/mserver/rest/ms 2.接口参数:data=xxxxx&k ...
- redis安装全过程
1. 从官网上下载redis. 2.安装gcc 3.进入./redis/src目录下make MALLOC =libc 4.遇到的问题 Redis简介: Redis是一个开源的使用ANSI C语言编写 ...
- 2018-2019第一学期C语言助教总结
博客作业成绩统计表 学号 第一次成绩 第二次成绩 第三次成绩 第四次成绩 第五次成绩 4022 75 84 75 64 75 4023 90 80 74 83 78 4024 75 63 61 60 ...
- Ambiguous reference to member 'dataTask(with:completionHandle:)'错误
在研究IOS的网络请求过程中,因为NSURLConnection已经过时,需要引用到URLSession var url:NSURL=NSURL(string: "http://3g.163 ...
- C#多线程应用:子线程更新主窗体控件的值(二)
在上篇文章中,我已经给大家列了一个在主线程中实现的方式,这篇文章来给大家说说使用Invoke的方式的例子: 对于不代理不太熟悉的朋友,建议先查查相关资料: 例子一: 在C#中,直接在子线程中对窗体上的 ...
- Hive之 hive架构
Hive架构图 主要分为以下几个部分: 用户接口,包括 命令行CLI,Client,Web界面WUI,JDBC/ODBC接口等 中间件:包括thrift接口和JDBC/ODBC的服务端,用于整合Hiv ...
- vs2005+WinCE模拟器+ActiveSync调试WinCE程序
来源:http://www.cnblogs.com/xjimmyshcn/archive/2011/07/19/2111087.html 一.WinCE 模拟器通过ActiveSync 6.1(即Wi ...