css基础文本对齐,水平对齐,垂直对齐

Posted 淡烘糕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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样式使文本居中对齐?

css如何对齐文本与文本输入框

如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

CSS:有没有办法在每个列表元素之前垂直对齐数字/项目符号?

CSS:有没有办法在每个列表元素之前垂直对齐数字/项目符号?