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 ...
随机推荐
- 09_Git patch(补丁)操作
Git打补丁,补丁操作一般在多人开发时才会用到,单人本地开发一般用不到,没必要. 应用场景举例: 我把我的更改打成一个补丁发给你,你来合并到你的代码中 或者,在家里电脑开发提交后,打一个补丁,拿到 ...
- mmap实现大文件快速拷贝
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- iOS-----使用GCD实现多线程
使用GCD实现多线程 GCD的两个核心概念如下: 队列 队列负责管理开发者提交的任务,GCD队列始终以FIFO(先进先出)的方式来处理任务---但 由于任务的执行时间并不相同,因此先处理的任务并一定先 ...
- 這是我既C語言作業寫博客後寫的第一篇博客
這篇博客應該算是寫給我自己的博客吧,所以這裏我想用繁體字寫,因為我漸漸地發現我已經很少使用到繁體字了,日常QQ聊天都使用簡體字,繁體字都懶得切換了,但是為了不讓別人麻煩,在外界交流的時候我會使用簡體字 ...
- centeros php 实战
apache 默认安装路径 Fedora Core, CentOS, RHEL:ServerRoot :: /etc/httpdPrimary Config Fle ...
- CentOS 下tomcat安装
1. 下载tomcat, http://apache.fayea.com/tomcat/tomcat-8/v8.5.16/bin/apache-tomcat-8.5.16.tar.gz 我下载的是这个 ...
- servlet转发与重定向
HttpServletRequest: 表示浏览器向服务器发送的请求报文,由Tomcat创建然后作为参数传递给我们doget,dopost方法. 功能:getParameter()获取请求参数 get ...
- 【转】Java中的内部类和匿名类
Java内部类(Inner Class),类似的概念在C++里也有,那就是嵌套类(Nested Class),乍看上去内部类似乎有些多余,它的用处对于初学者来说可能并不是那么显著,但是随着对它的 ...
- Fatal error: Call to undefined function Think\C() in /var/www/html/ceshi.hzheee.com/think/ThinkPHP/Library/Think/Think.class.php on line 334 这个问题解决
当APP_DEBUG为true时,包含图中这个文件,文件中又引导包含这些库文件,可以看出安装thinkphp3.2.3时ThinkPHP/Common/下是functions.php,把它改成func ...
- 在Visual Studio调试器中显示Unreal的数据类型的值
转自:https://blog.csdn.net/witton/article/details/5977766 在Unreal引擎中大量使用了自定义的数据类型如:FName,FString,TArra ...