先说水平对齐,那首先想到的就是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基础】文本对齐,水平对齐,垂直对齐的更多相关文章

  1. CSS设置文本的水平对齐方向

    介绍 在CSS中text-align属性有3种值,如下:left左.center中.right右. 由于简单我就不再多的介绍了直接进入text-align属性实践了,如果大家是新手自己一定要去实践哈, ...

  2. POI写docx文件table中的单元格水平、垂直对齐

    核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...

  3. (前端)面试300问之(2)CSS元素居中【水平、垂直、2者同时居中】

    一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...

  4. Div 居中对齐(水平、垂直)

    一:水平居中对齐 ***********************************************************************************  示例图 代码 ...

  5. CSS position &居中(水平,垂直)

    css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...

  6. HTML/CSS:导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  7. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  8. Xamarin.Android 水平对齐与垂直对齐

    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...

  9. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  10. CSS 中的各种居中 (水平、垂直)

    导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...

随机推荐

  1. 文本框按键事件onkeydown、onkeypress、onkeyup区别

    当我们在搜索时,会用到这几个事件 onkeydown 是指鼠标按下的那一刻,此时用户不知道按了什么,文本框也不会显示,首先触发的事件 onkeypress 是指鼠标按下然后松开的瞬间,此时仍然获取不到 ...

  2. JS高级程序设计学习笔记之数组

    数组创建的方式 var str = new Array();放入数字即为设置数组长度 var str = []; 数组的length可读可写 监测数组 Array.isArray()方法确定某个值是不 ...

  3. Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

    我引起此原因的功能如下: 在aspx页面添加按钮 JS方法: function downPPT() { $("#Btn_DownPPT").click();    } <bo ...

  4. 使用Flex 和 Red5开发简单视频直播功能

    Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器.桌面和操作系统.虽然只能使用 ...

  5. K-D Tree题目泛做(CXJ第二轮)

    题目1: BZOJ 2716 题目大意:给出N个二维平面上的点,M个操作,分为插入一个新点和询问到一个点最近点的Manhatan距离是多少. 算法讨论: K-D Tree 裸题,有插入操作. #inc ...

  6. <c:if>标签

    <c:if>的用途就和我们一般在程序中用的if一样. 语法 语法1:没有本体内容(body) <c:if test="testCondition" var=&qu ...

  7. [Mugeda HTML5技术教程之13]链接的添加方式

    在广告主的需求中,有很多情况下需要在动画中添加一些外部链接.这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理. 1.通过点击触发的链接 就是要用户点击屏幕来触发链接的情况,这是推荐使用的方 ...

  8. hdu 5363Key Set

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5363 Problem Description soda has a set S with n inte ...

  9. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  10. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...