【css基础】文本对齐,水平对齐,垂直对齐
先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相 同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明:
<p>我是一段测试文字</p>
如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面。
放在网页里就是这样:
为了能看清楚,我把body设置成960px宽,而且添加了灰色边框。
加一个text-align:center;就变成了这样:
确实到了中央,但如果padding-left:10px;padding-right:50px;结果就成了这样:
我试了下,不太明显,因为总的宽度960太大了,换成padding-left:10px;padding-right:300px;,结果就是这样:
这下就明显了,text-align:cneter;也不齐了,所以当对不齐的时候,看看有没有这样的情况存在。
说到padding,也可以用padding来对齐,极不推荐,所以不多说了。
再来说说垂直对齐,这个比较麻烦,如果是一行文字,可以用line-height来控制,也就是用行距来控制,line-height的值和文字所在容器的高度一样,比如,上面那个例子,p的高度是30px,就像这样:
为了看清楚,p用淡灰色背景标示,要把文字放在中间可以加上line-height:30px;,结果就成了这样:
看吧,垂直方向到中间了,配合上text-align:center;,就到了正中间了。
垂 直方向对齐有一个属性vertical-align,vertical-align:top;,vertical- align:middle;,vertical-align:bottom;,分别对应上对齐,中对齐,下对齐。为什么我一开始不说呢,有时候会无效,所 以我不常用,本来垂直对齐就不常用。
最后就是用padding了,一般是padding-top,数值多少就要看情况了。
【css基础】文本对齐,水平对齐,垂直对齐的更多相关文章
- CSS设置文本的水平对齐方向
介绍 在CSS中text-align属性有3种值,如下:left左.center中.right右. 由于简单我就不再多的介绍了直接进入text-align属性实践了,如果大家是新手自己一定要去实践哈, ...
- POI写docx文件table中的单元格水平、垂直对齐
核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...
- (前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- Div 居中对齐(水平、垂直)
一:水平居中对齐 *********************************************************************************** 示例图 代码 ...
- CSS position &居中(水平,垂直)
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
- HTML/CSS:导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- css基础 -文本溢出 text-overflow:ellipsis;
.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...
- Xamarin.Android 水平对齐与垂直对齐
水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
随机推荐
- HashMap陷入死循环的例子
//使用这个例子可以模拟HashMap陷入死循环的效果,可能需要执行多次才会出现. 1 package com.hanzi; import java.util.HashMap; public clas ...
- C# 窗体程序入门 之计算器
之前一直在java的B/S,这次被要求做一个C/S,其中客户端主要是界面和socket通信.因为没有使用过C#和Visual Studio的控件编程,先来个HelloWorld. 我的环境是visua ...
- hdu 3460
算法:字典树 题意:给你一些单词,有一台打印机只能进行以下三种操作 1.读入 2.删除 3.打印 让你输出最少的操作次数将这些单词全部打印出来: (字典树节点-1)*2 表示读入和删除操作: 打印操 ...
- uva1368 DNA Consensus String
<tex2html_verbatim_mark> Figure 1. DNA (Deoxyribonucleic Acid) is the molecule which contains ...
- javascript if 和else 语句练习
1.标准体重://男士体重=身高-100±3<br />//女士体重=身高-110±3<br />//输入性别.身高.体重,查看体重是否标准. <script type= ...
- python作业day3修改配置文件
思维还有点乱,撸代码到深夜,先上代码吧.(我是跟着武sir的思路的) 流程图: 代码(有注释): #!/usr/bin/env python # -*- coding:utf-8 -*- import ...
- 那两年炼就的Android内功修养
http://blog.csdn.net/luoshengyang/article/details/8923485 http://iconsparadise.com/ http://blog.csdn ...
- Log4net 配置详解
首先需在config文件的<configSections>节点中增加子节点配置. <configSections> <section name="log4net ...
- BZOJ 1927 星际竞速
http://www.lydsy.com/JudgeOnline/problem.php?id=1927 思路:把一个点拆成两个点, S->i 费用0,流量1 (代表这个点可以移动到其他点所必备 ...
- HDU 3401 Trade(单调队列优化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3401 题意:炒股.第i天买入一股的价钱api,卖出一股的价钱bpi,最多买入asi股,最多卖出bsi股 ...