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


    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相 同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同,举例说明:

    <p>我是一段测试文字</p>

    如果看过我前面一片做一个简单网页的日志就知道,这个应该放在body标签里面。

    放在网页里就是这样:

    【css基础】文本对齐,水平对齐,垂直对齐 - 蚀浪 - 御海轩

    为了能看清楚,我把body设置成960px宽,而且添加了灰色边框。

    加一个text-align:center;就变成了这样:

    【css基础】文本对齐,水平对齐,垂直对齐 - 蚀浪 - 御海轩

     确实到了中央,但如果padding-left:10px;padding-right:50px;结果就成了这样:

    我试了下,不太明显,因为总的宽度960太大了,换成padding-left:10px;padding-right:300px;,结果就是这样:

    【css基础】文本对齐,水平对齐,垂直对齐 - 蚀浪 - 御海轩

     这下就明显了,text-align:cneter;也不齐了,所以当对不齐的时候,看看有没有这样的情况存在。

    说到padding,也可以用padding来对齐,极不推荐,所以不多说了。

    再来说说垂直对齐,这个比较麻烦,如果是一行文字,可以用line-height来控制,也就是用行距来控制,line-height的值和文字所在容器的高度一样,比如,上面那个例子,p的高度是30px,就像这样:

    【css基础】文本对齐,水平对齐,垂直对齐 - 蚀浪 - 御海轩

     为了看清楚,p用淡灰色背景标示,要把文字放在中间可以加上line-height:30px;,结果就成了这样:

    【css基础】文本对齐,水平对齐,垂直对齐 - 蚀浪 - 御海轩

     看吧,垂直方向到中间了,配合上text-align:center;,就到了正中间了。

    垂 直方向对齐有一个属性vertical-align,vertical-align:top;,vertical- align:middle;,vertical-align:bottom;,分别对应上对齐,中对齐,下对齐。为什么我一开始不说呢,有时候会无效,所 以我不常用,本来垂直对齐就不常用。

    最后就是用padding了,一般是padding-top,数值多少就要看情况了。

  • 相关阅读:
    前端面试官如何从笔试中选拔人才
    webapp应用--模拟电子书翻页效果
    用webpack实现前端自动化构建
    webpack3中文版使用参考文档--全面解析webpack.config.js
    300行代码揭密轮播插件核心代码的实现过程
    免费视频播放器videojs中文教程
    微信小程序开发初体验
    前端工程自动化构建总结
    细说前端自动化打包工具--webpack
    H5程序员如何利用cordova开发跨平台应用
  • 原文地址:https://www.cnblogs.com/webbest/p/5618690.html
Copyright © 2020-2023  润新知