line-height应用实例
Posted blogregisterboby
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了line-height应用实例相关的知识，希望对你有一定的参考价值。
实例1：图片水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div style="background-color: gray;line-height: 300px;text-align: center;"> <img src="123.jpg" style="width: 300px;vertical-align: middle;"> </div> <!-- 关键在于是要设置父级line-height的值，而不是height，再就是img的vertical-align: middle--> </body> </html>
实例2：多行文本水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ line-height: 250px; text-align: center; background-color: gray; } .text{ display: inline-block; line-height: normal; vertical-align: middle; text-align: left; } </style> </head> <body> <div class="box"> <span class="text">秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚。秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚</span> </div> <!-- 多行文本垂直居中，最主要的是要重置子元素的line-height和text-align，并把display设置为inline-block 这是因为子元素的line-height和text-align如果不设置就继承父级的，与我们想要表示有冲突，设置为display:inline-block 是因为子元素的行高是根据line-height: normal属性，就字体大小重新计算，而设置大小就要求子元素是block类型的 --> </body> </html>
以上是关于line-height应用实例的主要内容，如果未能解决你的问题，请参考以下文章