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#并行编程(1)
一.基于任务的程序设计 共享内存多核OS和分布式内存OS 共享内存多核OS-一个微处理器由多个内核组成,且每个内核共享一段私有内存: 分布式内存OS-- 由多个微处理器组成,每个微处理器可以有自己的私 ...
- 毒害一代Java程序猿的HttpClient
前言 2016年以来,越来越多Android开发者使用Retrofit作为HTTP请求框架.原因其一,Google发布Android 6.0 SDK (API 23) 抛弃了HttpClient:其二 ...
- Python3 元组Tuple(十二)
元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...
- SharePoint 2013的100个新功能之网站管理(三)
一:跨网站发布 跨网站发布是SharePoint 2013的一个新功能,可以使用户跨网站集.Web应用程序甚至是场重用内容.该功能叫做跨网站发布功能.用户可以使用该功能在SharePoint 2013 ...
- protel 99se 全部焊盘和过孔补泪滴,很多都是失败的,对板子有影响吗?补泪滴的作用?
泪滴 是焊盘与导线或者是导线与导孔之间的滴装连接过度,设置泪滴的目的是在电路板受到巨大外力的冲撞时,避免导线与焊盘或者导线与导孔的接触点断开,另外,设置泪滴也可使PCB电路板显得更加美观.te ...
- query更多的筛选用法
比较操作符$eq : = 写法:db.class0.find({age:{$eq:18}},{name:1,_id:0}); 查找年龄等于18$lt :<$lte : <=$gt : & ...
- java阳历转农历
package com.reading.task; import java.text.ParseException;import java.text.SimpleDateFormat;import j ...
- html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
- android高速上手(三)经常使用控件使用
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangpeifeng669/article/details/26288387 完毕了android的 ...
- 每日一条 git 命令行:git clone https://xxxxx.git -b 12.0 --depth 1
每日一条 git 命令行:git clone https://xxxxx.git -b 12.0 --depth 1 -b 12.0:分支 12.0 --depth 1:depth 克隆深度,1 为最 ...