zoukankan      html  css  js  c++  java
  • 对line-height的理解

    <html>

    <head>
    <style>
    </style>
    </head>

    <body>
    <!--line-height:属性表示的是该div中的文字的行高,注意这个属性是来定义文字的行高的,单行文本垂直居中时可以设置line-height和height一即可-->
    <!--line-height=文本上边距+文本+文本下边距,文本上下边距始终相等,也就是说文本始终是垂直居中于line-height中的,所以设置line-height和height相等就能达到文本垂直居中于它的父元素的效果。-->
    <div style="line-height:80px;height:80px;border:1px solid red">
    <div style="display:inline;border:1px solid green;">单行文本div中居中显示</div>
    </div>

    <div style="height:300px;line-height:300px;border:1px solid red;">
    <!--多行文本的垂直居中,可以将多行文本看做是一个inline或inline-block元素-->
    <div style="line-height:normal;display:inline-block;border:1px solid red;vertical-align:middle">
    多行文本居中显示<br>
    多行文本居中显示<br>
    多行文本居中显示<br>
    多行文本居中显示<br>
    </div>
    <!--这里要使多行文本居中,设置这个空字符很关键,要不就不能垂直居中的-->
    <i>&nbsp;</i>
    </div>

    </body>
    </html>

  • 相关阅读:
    一些基本概念
    Linux命令
    浮点型数据
    编码习惯
    VC++ Debug编译方式
    程序和进程
    文件和目录
    登录
    c#发送http请求注意
    html5获取图片的宽高
  • 原文地址:https://www.cnblogs.com/hanszhao/p/10172321.html
Copyright © 2011-2022 走看看