一、vertical-align实现了什么？

先来看一下vertical-align实现了什么，在CSS中这个属性是垂直置中，指在元素中所有元素位置相互置中(中线对齐)，并不是相对于外框高度垂直居中。下面举个例子来看一下：

样式文件

DOM结构

上面这段代码的效果是：

所以vertical-align=middle所有元素相互是居中对齐的，这里这些元素并未在整个外框里垂直居中。基于此，设想vertical-align=middle如果有一个元素的高度是100%的话，是不是就真正在外框里垂直居中了。然而，直接加一个DOM放在其中又显得比较奇怪，所以，伪元素该派上用场了。往下看

二、伪元素介入

先加上伪元素的代码：

上面代码一定要注意display:inline-block，高度100%，为了不占空间，宽度设置0。效果如下

总结

关于垂直居中的方法有很多，伪元素法只是其中一种，它利用了行内元素相互之间的设置vertical-align=middle达到中线对齐的原理。伪元素成为其中一个不可见的元素，起着关键性作用。

css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？相关推荐

css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决
问题描述按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示.代码如下(已精简): {{ confirmButtonText }} ... but ...
css设置按钮竖直方向居中_css实现垂直居中6种方法
在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: Document ...
CSS | DIV 水平和竖直方向居中
1.竖直方向: 最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中. 以往的经验: display: inline-block; vertical-align: middle; 就可以解决.但是这 ...
小程序中align-items: center竖直方向居中失败解决办法
垂直居中失败现象可以看到我在CSS中设置了水平和垂直居中,但是显示出来并没有效果 CSS中代码 .Nav_text{display: flex;align-items: center;justify ...
【LaTeX应用】画图，上面一个图形，下面两个图形，竖直方向居中
如图所示,在上面有一个矩形框,下面两个矩形框,如何让上面矩形框居中,下面矩形框也居中? 采用一种比较讨巧的方式实现:在上面矩形框的下面定义一个无内容的空矩形框,然后下面两个矩形框在这个空矩形框的基础上 ...
利用CSS使元素在水平方向或水平,竖直同时居中
水平居中三种方法,参考: <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset ...
CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行块状元素 ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...

css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？

一、vertical-align实现了什么？

二、伪元素介入

总结

css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？相关推荐

最新文章

热门文章