摘要:所以文字最终可以在整个中垂直居中显示。默认值为,即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式,就成功垂直居中了,都是多余了的。
请一定看到最后,flex太令人惊喜! ヾ(o◕∀◕)ノ
入个门先来考虑这样一个问题:一行文字在一个固定高度的父div中怎样做到垂直居中?
我们都知道设置父div的line-height 等于它的height就可以了,像下面这样:
//html我要垂直居中//css div { padding: 10px; height: 120px; line-height: 120px; font-size: 16px; background: pink; }
效果如下图:
原理也很简单,line-height设置之后,文字的行高随之改变。来看一下设置line-height后具体的改变方式:
用ling-height的值减去文字font-size的值,即(120 - 16) = 104px,把它们的差 `104 / 2
= 52px` 分别加到文字的上方和下方。所以文字最终可以在整个div中垂直居中显示。
补充一点关于line-heihgt取值设置为百分比与设置为数字的不同:
假如当前元素font-size: 30px;我们想让行高为字体大小的3倍,就会设置line-height: 300%; 或 line-height: 3;,而假如这个元素有一个子元素,字体设置为font-size: 16px;。那么设置为300%的时候,子元素的行高为90px,即先计算,后继承;设置为3的时候,子元素的行高为48px,即先继承下来,再计算。
jsfillder中的例子
只有文字的时候我们用上述方法就可以实现垂直居中,那么如果div中包含图片和文字呢?
进个阶也就是写这篇文章的实际问题来源:
一个div中包含两个子元素:左侧图片,右侧文字。已知图片高度远高于文字,怎样做到图片和文字都垂直居中呢?
如果依然使用上面设置line-height的方法::
//html我要竖直居中//css div { padding: 10px; height: 160px; line-height: 160px; font-size: 16px; background: pink; } img { width: 70px; height: 70px; }
效果却是这样的:
可以看到,只是文字居中了,图片的位置不是我们想要的。原因是:图片img有一个vertical-align属性,定义的是行内元素的基线 与 元素所在行的基线在垂直方向上的位置关系。默认值为baseline,即把元素放在父元素的基线上。
【注意:这个元素始终参照元素行高哦!所以如果是想让行高为14px的行内元素在一个50px高的div中垂直居中首先需要把该行内元素的line-height改为50px哦 ●ω●】
除了默认值,vertical-align还有以下几种常见取值,依次来试一下吧:
(其中,若设置百分比,参照物是line-height的值。)
img { vertical-align: top; } // 把元素的顶端与行中最高元素的顶端对齐
img { vertical-align: bottom; } //把元素的顶端与行中最低元素的顶端对齐
img { vertical-align: text-top; } //把元素的顶端与父元素字体的顶端对齐
img { vertical-align: text-bottom; } //把元素的底端与父元素字体的底端对齐
img { vertical-align: middle; } //把此元素放置在父元素的中部
可以发现,设置值为middle就是我们想要的结果。
另外,vertical-align还可以设置百分比和数值,当设置为负值时,图片会向下移动。
万万没想到:用flex两行代码就实现了 ●0●只要给容器加上下面两条样式,就成功垂直居中了,line-height都是多余了的。
display: flex; align-items: center;
完整代码是这样:
//html我要竖直居中//css div { display: flex; align-items: center; padding: 10px; height: 160px; font-size: 16px; background: pink; } img { width: 70px; height: 70px; }
So easy !
附上阮老师写的flex教程:
Flex 布局教程:语法篇
Flex 布局教程:实例篇
参考资料:
http://www.w3school.com.cn/cs...
https://developer.mozilla.org...
http://stackoverflow.com/ques...
https://developer.mozilla.org...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111863.html
摘要:所以文字最终可以在整个中垂直居中显示。默认值为,即把元素放在父元素的基线上。万万没想到用两行代码就实现了只要给容器加上下面两条样式,就成功垂直居中了,都是多余了的。 请一定看到最后,flex太令人惊喜! ヾ(o◕∀◕)ノ 入个门 先来考虑这样一个问题:一行文字在一个固定高度的父div中怎样做到垂直居中?我们都知道设置父div的line-height 等于它的height就可以了,像下面...
摘要:下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系,而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见,特意添加一个的包裹着。 前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊。。。。。。于是通过本篇来一探究竟...
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:相关内联格式上下文主要影响内布局的行盒模型,这是一个显示区域,根据块状容器内,每一行的多个内联元素都会共同生成一个行盒模型。 前言 通常情况下,要使元素排列在一行内,通常做法就是使用float,然后再清浮动。 如下:showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中,则必须手动调整,蓝色或者绿色块的位置,比较繁琐。 ...
阅读 2408·2023-04-25 22:09
阅读 973·2021-11-17 17:01
阅读 1404·2021-09-04 16:45
阅读 2555·2021-08-03 14:02
阅读 741·2019-08-29 17:11
阅读 3222·2019-08-29 12:23
阅读 1049·2019-08-29 11:10
阅读 3241·2019-08-26 13:48