CSS篇之巧用line-height

hsluoyz 发布于2019-08-01 16:23 / 3349人阅读

摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。

公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：

代码：

已中止

.left-tit{
    width: 30px;
    height: 158px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    letter-spacing: 4px;
    background: #eb5c5e;
    padding-top: 50px;
    padding-left: 5px;
}

一般情况，我会用padding（如上）或者用position+transform+margin使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。

偶然发现，其实用line-height就能不用具体控制padding数值，也不用多加代码而完美实现。
改善代码如下:


    已中止

.left-tit{
    width: 30px;
    line-height: 158px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #eb5c5e;
}
.left-tit span{
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
}

主要:设置外层line-height及内部span为inline-block；两点结合真的是挺巧妙的，line-height撑开盒子高度并保证文字垂直居中， inline-block使得元素具有内联元素特性而水平居中，同时又具有块级元素的特性能够设置宽度。

云服务器 GPU云服务器巧用CSS的MASK滤镜 line-height 巧用巧用云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50488.html

CSS篇之巧用line-height

摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代码：已中止 .left-tit{ wi...

dendoink 2019-08-30 15:53 评论0 收藏0
新手必看：ES6使用之巧用Set为数组去重

摘要：项目使用了，所以就不直接操作了，而是直接操作数组。为了避免往数组中重复数据，利用了不能含有重复元素的特性来去重当然，重复添加自己也是会处理的，也可以使用数组的方法判断。当然，使用数组，也可以对每个移除项，使用或方法。前几天看了看ES6的一些知识，正好今天做项目的时候就用上了Set的一个特性，现在分享给和我一样的新手。目的就是点击某个checkbox,实现checkall的效果。项目使...

zhichangterry 2019-08-21 11:55 评论0 收藏0
CSS篇之水平导航

摘要：关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题一个最简单的结构如下，请实现水平导航。缺点，和方法一样，会出现空白间隙，解决方案如上，因为是行内元素，所以不能设置宽高，比较局限。关于水平导航已然是老生常谈之问题，看了网上诸多方法，今天小小的总结对比了一下现有方法的优缺点。问题：一个最简单的html结构如下，请实现水平导航。 ...

李义 2019-08-29 11:19 评论0 收藏0
CSS（一）伪元素的巧用

摘要：并且，一些伪元素可以使开发者获取到不存在于源文档中的内容比如常见的还可以为伪元素定制样式。。中新增加的伪元素必须用伪类使用一个冒号例如。就本文而言，我们将把我们探讨的范围限制在和这两个伪元素的巧用上。作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍：love 与 hate 纠缠不休,大家都懂的吧。。。。伪类和...

entner 2019-08-30 15:53 评论0 收藏0
巧用css实现无js的tab切换

摘要：切换一直是页面之中主要的结构，最近在写的项目，想到可不可以不用和做控制，实现纯和的切换。页面交换的原理无非是利用标签的属性在显示与否之间的切换。再之后利用的的选择器就可以关联上要切换的页面了。这里直接利用了绝对定位的方法。 tab切换一直是页面之中主要的结构，最近在写vue的spa项目，想到可不可以不用href和js做控制，实现纯css和html的tab切换。 tab页面交换的原理无...

DevTTL 2019-08-29 12:29 评论0 收藏0