94

Q:你知道如何用line-height使多行文字垂直居中么？

 7 years ago
source link: https://juejin.im/post/5a1cd142f265da431769e042
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Q:你知道如何用line-height使多行文字垂直居中么？ - 掘金

Q:你知道如何用line-height使多行文字垂直居中么？

2017年11月29日 03:00 ·  阅读 5946

我们先看运行效果：

line-height实现一行或多行文字垂直居中
  1. line-height（行高） : 指的是两行文字间基线之间的距离，而实际撑开div高度的不是height，而是line-height。
  2. **line box **: 每一行称为一条line box，它又是由这一行的许多inline box组成，它的高度可以直接由最大的line-height决定。很多条line box的高度垂直堆叠形成我们见到的div或是p标签之类的父元素高度了。无论line box所占据的高度是多少，其占据的空间都是与文字内容公用水平中垂线的。它的垂直居中的性质可以用来实现文字或图片的垂直居中对齐。
  3. **行间距 - 行内框高度 **：
    160019114f9630f9~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp
    行间距是font-size与line-height的差值，被分成两半在内容区的上下 行内框高度（替换元素）=内容区宽度 行内框高度（非替换元素）=line-height 了解更多替换元素非替换元素的区别点这

一行文字垂直居中

根据知识点3，现在可理解只设置行高后，内容区上下方自动填充行间距，使得文字垂直居中。

<p class="single_line">这是一行文字这是一行文字这是一行文字</p>
复制代码
.single_line{
  line-height:150px; border:1px dashed #cccccc; padding-left:5px;font-size:12px;
}
复制代码

多行文字垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体有大有小怎么办呢？可以借助于line-height。

<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150px的标签内的多行文字，文字大小为12像素。
        <br>这里是第二行，用来测试多行的显示效果。
    </span>
    <i> </i>
</p>
复制代码

inline-block属性使得外面包了一层line box。根据知识点2以及内联元素默认基线对齐，给span和i都设置为vertical-align:middle即可。实际应用中可将i的width设为0，案例中1px为了帮助理解用。

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    vertical-align:middle;
}
.mulit_line i{
    width:1px; 
    display:inline-block;
    vertical-align:middle; 
    font-size:0;
    background:red;
    line-height:150px;
}

复制代码

看完整代码点这

更多内容欢迎互相交流一下。

16001c21b1a4aa0a~tplv-t2oaga2asx-zoom-in-crop-mark:3024:0:0:0.awebp

report

Recommend

  • 78
    • 掘金 juejin.im 6 years ago
    • Cache

    CSS实现水平垂直居中的10种方式（史上最全）

    划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star 仅居中

  • 54
    • 掘金 juejin.im 6 years ago
    • Cache

    CSS垂直居中的七个方法

    我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将

  • 18
    • www.cnblogs.com 5 years ago
    • Cache

    css实现水平垂直居中的几种方式

    梳理下平时常用css水平垂直居中方式～ 使用flex布局 HTML <div class="box"> <div class="child"></div> </div> CSS .box { width: 100vw; height: 500px;...

  • 47
    • www.clloz.com 4 years ago
    • Cache

    水平垂直居中方案

    前言 本文总结一些水平和垂直居中的方案。 水平居中 行内元素 行内元素的...

  • 12
    • www.itwork.club 4 years ago
    • Cache

    图片和文字垂直居中对齐

    图片和文字垂直居中对齐漂洋过海来看你IT俱乐部-码出人生图片和文字垂直居中对齐Dec 18, 2020CSS4...

  • 12
    • lotabout.me 4 years ago
    • Cache

    CSS 垂直居中

    Table of Contents简单一句 margin: 0 auto 我们便能搞定水平居中，而正当我们开心地写出 margin: auto 0 时，浏览器却没却无情地拒绝了我们，那我们来看看如何用 CSS 实现垂直居中吧。 要完全理解本文，我们假设...

  • 7
    • www.cnblogs.com 4 years ago
    • Cache

    【前端攻略】最全面的水平垂直居中方案与flexbox布局

    【前端攻略】最全面的水平垂直居中方案与flexbox布局 最近又遇到许多垂直居中的问题，...

  • 10
    • www.haorooms.com 4 years ago
    • Cache

    css的div垂直居中的方法，百分比div垂直居中

    我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。 固定高宽div...

  • 17
    • zhuanlan.zhihu.com 4 years ago
    • Cache

    React Native Text 垂直居中问题

    React Native Text 垂直居中问题Text 垂直居中问题最近发现 React Native (以下称RN)里，<Text> 的 文字垂直居中 ，有很多小问题，有必要总结一下。提前说明下，这里使用的 RN 版本是： 0....

  • 6
    • blog.p2hp.com 2 years ago
    • Cache

    CSS实现文字垂直居中的7种方法

    一、问题描述： 当高度固定或不固定时，单行或多行文本难以实现垂直居中； 二、解决方法： 1、使用line-height属性，将line-height设置与元素高度等高。 局限性：只适用于单行文本，局限性大。 .box {...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK