实例1：图片水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div style="background-color: gray;line-height: 300px;text-align: center;">
  11.         <img src="123.jpg" style="width: 300px;vertical-align: middle;">
  12.     </div>
  13.     <!-- 关键在于是要设置父级line-height的值，而不是height，再就是img的vertical-align: middle-->
  14. </body>
  15. </html>

实例2：多行文本水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             line-height: 250px;
  11.             text-align: center;
  12.             background-color: gray;
  13.         }
  14.         .text{
  15.             display: inline-block;
  16.             line-height: normal;
  17.             vertical-align: middle;
  18.             text-align: left;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span class="text">秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚。秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚</span>
  25.     </div>
  26.     <!-- 多行文本垂直居中，最主要的是要重置子元素的line-height和text-align，并把display设置为inline-block
  27.         这是因为子元素的line-height和text-align如果不设置就继承父级的，与我们想要表示有冲突，设置为display:inline-block
  28.         是因为子元素的行高是根据line-height: normal属性，就字体大小重新计算，而设置大小就要求子元素是block类型的
  29.     -->
  30. </body>
  31. </html>

line-height应用实例的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. Delphi XE5教程3：实例程序

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  5. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  6. Python Line Messaging Api

    Line Messaging line 是国外一个很火的实时通信软件,类似与WX,由于公司业务需求,需要基于line开发一个聊天平台,下面主要介绍关于line messaging api 的使用. 官 ...

  7. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  8. canvas实践1

    今天同学遇到问题,我于是就利用了canvas帮他写了个效果,效果如图 我本来在学习不是很想做,但是昨天感觉自己学的有点累就去帮忙做了,我的思路是每次画一个矩形,然后通过rotate旋转让它自身旋转45 ...

  9. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  10. Xamarin.Forms——尺寸大小（五 Dealing with sizes）

    如之前所见的大量可视化元素均有自己的尺寸大小: iOS的状态栏高度为20,所以我们需要调整iOS的页面的Padding值,留出这个高度. BoxView设置它的默认宽度和高度为40. Frame的默认 ...

随机推荐

  1. 2018-2019-2 网络对抗技术 20165336 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165336 Exp3 免杀原理与实践 1.基础问题回答 (1)杀软是如何检测出恶意代码的? 根据计算机病毒课程知道了每个病毒都有其对应的特征码,杀软是根据这 ...

  2. esp32驱动SSD1306的oled显示汉字(micropython)

    1.完整源码: 主函数oled.py from ssd1306 import SSD1306_SPI from ssd1306 import SSD1306 import font import ma ...

  3. 共享文件 Ubuntu下安装Samba与Windows

    Author:Xianghai Ding.Date:2019/01/08**************************************************************安装 ...

  4. python做数据驱动

    python代码如下: import unittestfrom openpyxl import load_workbookfrom openpyxl.styles import Fontfrom op ...

  5. 设置光标聚焦输入框（EditText）并弹出软键盘（在适配器中设置）

    参考代码: public void setFocusEditTextAndShowSoftInput(final EditText editText){ editText.setFocusable(t ...

  6. Linux unalias命令 取消别名

    unalias 提示:命令行处理别名仅为临时取消别名,重启系统后就失效了 [root@MongoDB ~]# alias |grep cp alias cp='cp -i' [root@MongoDB ...

  7. Python request 在linux上持续并发发送HTTP请求遇到 Failed to establish a new connection: [Errno 11] Resource temporarily unavailable

    并发数被限制 vim /etc/sysctl.conf 添加 net.ipv4.ip_local_port_range = 1024 65535   保存 /sbin/sysctl -p 让修改生效 ...

  8. [py]资源搜集

    python在线内存图 我会把一些好的py book的资源放到这里 来源: https://piaosanlang.gitbooks.io/spiders/10day/README10.html Le ...

  9. Xamarin 自定义 ToolbarItem 溢出菜单实现(Popover/Popup) 弹出下拉效果

    使用  Rg.Plugins.Popup 插件 1.  新建 PopupMenu.xaml <?xml version="1.0" encoding="utf-8& ...

  10. .htaccess实现php网站伪静态

    伪静态是啥?很简单,就是假的静态网页...例如有个网页是:www.xxx.com/index.php?id=1这是动态网页,php后缀的如果改成:www.xxx.com/index-1.html那么这 ...