文字对齐之text-align总结
一、文字对齐总结:
下面是我实际运用中遇到的问题总结:
css代码:
效果(段落文字没有对齐):
去掉html中的<p>标签,css样式同样去掉p标签,效果如下(达到预期效果):
为什么在div中加<p>标签再给p设置样式段落的最后一行会不对齐?
仔细一看写的样式发现了问题所在:
我之前用这样的后代选择器定义了样式,它会让在祖先容器introduce中的所有p的文本内容居中,而text-align定义为center,文本的最后一行不会居中,所以我的段落最后一行不会居中。
之所以#instroduce p选择器设置的text-align样式的优先级会大于.content p设置的text-align样式的优先级,是因为#instroduce p选择器的权重比.content p选择器大,现在我只想让第一p标签的文本采用text-align:center居中,只需要将选择器改成子选择器即可:
这样段落文本就可以对齐了,遇到这样的问题,就会发现还是很有必要把css的权重计算问题弄透彻。
上面的.content p的样式还可以再优化:
不需要设置text-align:justify段落也可以对齐,因为内容会自动填满整个容器(我是这样理解的),必要的情况下可以选择用text-align:justify来给文本设置两端对齐。
关于文字对齐text-align:
值的含义:
目前在谷歌浏览器和火狐浏览器上测的,必须要设置两端对齐的时候,只需要将text-align设为justify就可以实现文字两端对齐。
文字对齐之text-align总结的更多相关文章
- html&css中的文字对齐问题
html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...
- [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- C# Excel 中设置文字对齐方式、方向和换行
在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- [CSS]图片与文字对齐问题
摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...
- CSS 之 控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
- radio 和checkbox与文字对齐问题
今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...
- DIV+CSS 让同一行的图片和文字对齐
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
随机推荐
- c++11编码规范 NULL还是nullptr
0和nullptr/NULL 至于指针(地址值),根据实际选择用0.NULL还是nullptr.对使用了C++11特性的项目,选用nullptr:对于C++03项目,推荐NULL,因为它像是一个指针
- UVa 11246 - K-Multiple Free set
题意大意: 一个{1..n}的集合,求一个子集合,使得元素个数最多,并且不存在有两个元素x * k = y,求出最多的元素个数是多少. 分析: 先要删除k倍的,删除为{k, 2k, 3k, 4k, 5 ...
- UVa 11729 - Commando War
[题目翻译]: 题目分析:因为任务是可以并行的执行,所以直觉上是花费时间长的任务优先去部署.但是这到题目还给你交待任务的时间,所以容易让人想多了. 不管有没有交待任务的时间,对于任务x和y,只可能有两 ...
- UI学习笔记---第七天
UIScrollView 滚动视图 UIScrollView的常用属性 iPone屏幕大小限制了内容的显示,UIScrollView 类提供了屏幕滚动功能 UIScrollView是所有滑动视图的 ...
- Object类、包装类、内部类详解
1.Object类 1.概念: 1.1 所有类在创建时都默认继承了java.lang.Object 1.2 所有类对象都可以声明为类对象的引用 Object ob1=new String(); Obj ...
- MySQL 参数autoReconnect=true 解决8小时连接失效
<!-- dataSource加参数 处理mysql 8小时自动断开连接的问题 --> <property name="testWhileIdle" va ...
- mysql in和or查询效率
http://blog.chinaunix.net/uid-20639775-id-3416737.html 上面链接博主的文章分析结论: or在没有索引的情况下呈指数增长,in则是正常递增. or的 ...
- leetcode 148. Sort List ----- java
Sort a linked list in O(n log n) time using constant space complexity. 排序,要求是O(nlog(n))的时间复杂度和常数的空间复 ...
- php常用配置(php.ini)
查看php配置文件的位置 # /usr/local/php/bin/php -i | head php配置文件中的注释是用;号 1.disable_functions(php要禁用的函数) phpin ...
- jQuery select操作控制方法小结
需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可. jQuery获取Select选择的Text和Value: 语法解释: 1. $( ...