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

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after)

一、vertical-align实现了什么?

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

6200cb46b19f95564ac2fddf8d1c0c51.png

样式文件

3219dc9bfb294396a1470463fe66692e.png

DOM结构

上面这段代码的效果是:

fb32867d2cb6cbd0964c487064659c3a.png

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

二、伪元素介入

先加上伪元素的代码:

257baa8f8f6f07b28978e99602848f85.png

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

ba726cb71deec6358cdf1db32e658ed7.png

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551220.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ajax和fetch哪个好,axios和ajax,fetch的区别

1,传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。JQuery ajax 是对原生XHR的封装&am…

九年级数学解方程50道_【初中数学】北师大版九年级上册数学知识点总结

这里整理了一份【初中数学】北师大版九年级上册数学知识点总结其他版本的总结后面会更新资料有点多,建议先收藏完整版资料下载可搜【初中复习资料】回复【399】(资料整理不易,可以收藏-转发支持一下吗)资料有点多,建议…

按钮传值给ajax,用jquery和ajax实现分页时,按钮怎么给jquery传值?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼function changepage(page){$.post("pages.php",{page:page},function(data){$("#pagetable").html(data);})}$(document).ready(function(){changepage(1);$("#firstpage").click(function(){chang…

小米9私密相册怎么找_“拼藏搜”,手机相册还能这么玩

发朋友圈九图不够看?私密照片不想被轻易看到?照片太多找半天太麻烦?别着急,学会这几招,成为“制片人”。第一招:“拼”成为“制片人”的第一步,当然是制作照片了!拼出有feel的图就靠…

路由虚拟端口配置dhcp服务器,交换机和路由器DHCP设置中的端口配置

在利用交换机和路由器进行DHCP的设置的时候,端口的配置是非常重要的。这里我们就来针对这个情况进行一下实例讲解。网络环境:一台3550EMI交换机,划分三个vlan,vlan2 为服务器所在网络,命名为server,IP地址段为192.168.2.0,子网掩码…

idea python工程zip打包_【面试划重点】-- Python常见知识点

分享工作中遇到的python知识点,估计很多人没太留意过这个知识点,但是对巩固很多基本语法和一些python中一些有用的方法很有帮助,工作中的问题我简化说下,大概就是下面需求:有3个python列表:分别是年龄&…

微软codepush搭建服务器,通过 CodePush API 参考对本机 SDK 作出响应 - Visual Studio App Center | Microsoft Docs...

响应 Native Client SDK API 参考02/19/2020本文内容CodePush 插件由以下两个组件组成:可以导入/要求的 JavaScript 模块,并允许应用在运行时与服务交互 (例如,检查更新、检查有关当前正在运行的应用更新) 的元数据。本机 API (目标-C 和 Jav…

如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计

除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站。在本文中,我们将探讨许多可用的工具(围绕html和css),从响应图像到相对较新的CSS函数,无论我们是否使用媒体…

查找服务器大文件内容,Linux查找大文件命令,springmvc基础面试题

1、查询服务器中大于1G的文件find / -type f -size 1G查询结果如下:[rootlocalhost ~]# find / -type f -size 1G/var/lib/mysql/darkindustry/tbl_jm_account.ibd/var/lib/mysql/tase1/key_timing_3.ibd/var/lib/mysql/tase1/news_info_bak_1.MYD/var/lib/mysql/my…

vue 微信公众号支付接口_vue实现微信公众号支付DEMO

预备工作连接电源打开你的电脑打开你的vscode获取appidnpm install weixin-js-sdk开撸在你的支付按钮上添加一个事件、代码为:var url https://open.weixin.qq.com/connect/oauth2/authorize?appid输入你的appid&redirect_urihttp://tdjl.kurongdashi.com?pa…

如何将文件二进制传输至aix服务器,有什么办法把文件从WINDOWS系统中传到AIX中?...

有什么办法把文件从WINDOWS系统中传到AIX中?(2011-12-21 04:19:38)标签:杂谈有什么办法把文件从WINDOWS系统中传到AIX中?我有一台笔记本可以远程登陆170和F85,两台都是AIXV5.2,原来ML是04,想升级&#xff0…

小米手机硬改技术_小米11手机爆料:首发骁龙875 或采用屏下摄像头技术

12月1日高通应该就要公布骁龙875处理器,而对于这颗2021年的旗舰芯片,小米手机必然要抢首发,这也是他们一贯的传统。据最新消息称,小米11手机有望首发骁龙875处理器,不过这款手机预计要在明年3月份左右推出,…

小企业文件打印服务器,小企业云服务器方案

小企业云服务器方案 内容精选换一换在“确认配置”页面,查看云服务器配置详情。如果您对价格有疑问,可以单击“了解计费详情”来了解产品价格。如果您对价格有疑问,可以单击“了解计费详情”来了解产品价格。企业项目该参数针对企业用户使用。…

linux安装python27_linux下安装python27 nginx 和uwsgi

注意:python27 默认没有安装 pip 和setuptools所以要提前安装。(务必先提前安装python27 哈 )wget --no-check-certificate https://bootstrap.pypa.io/ez_setup.pypython ez_setup.py--insecurewget https://pypi.python.org/packages/11/b6/abcb525026a4be042b486…

太太丘舍去_过中不至,太丘舍去,去后乃至的意思

展开全部过了正午朋友还没有到,陈太丘不再等候他而离开了,陈太丘离开后朋友才到。原文出自e69da5e6ba903231313335323631343130323136353331333433643131《陈太丘与友期行》南北朝刘义庆陈太丘与友期行,期日中。过中不至,太丘舍去…

5怎么选国外节点_外卖包装怎么选?这5个技巧要掌握

(↑点上图“知识卡片”,按右上角箭头,可分享至朋友圈保存↑)在这个重颜值的时代,消费者对于外卖包装的诉求在逐渐提高,在餐品质量差异不大的前提下,那些包装好的商品,更具市场竞争力,能加深消费…

基于jmx监控kafka_0542-6.1.0-非安全环境下Kafka管理工具Kafka Eagle安装使用

1.文档编写目的Fayson在前面的文章介绍了《0374-如何在CDH集群中部署Kafka Manager》,本篇文章Fayson介绍另外一款的监控工具Kafka-eagle,它可以同时监控多个集群,监控集群中Topic的被消费情况(包含Lag产生、Offset的改变及Partition分布)&am…

android 怎么调用js项目_APP逆向神器之Frida【Android初级篇】

说到逆向APP,很多人首先想到的都是反编译,但是单看反编译出来的代码很难得知某个函数在被调用时所传入的参数和它返回的值,极大地增加了逆向时的复杂度,有没有什么办法可以方便地知道被传入的参数和返回值呢?答案是有的…

jdbc和mysql做游戏排行榜_MySQL数据库与JDBC编程

欢迎关注公众号:xfxuezhangMySQL数据库与JDBC编程JDBC (Java Database Connectivity)DDL(Data Definition Language,数据定义语言)语句创建表修改表结构增加列定义修改列定义删除列删除数据表清空表MySQL重命名数据表MySQL修改列名数据库约束索引(一个数…

mysql goldengate_goldengate同步mysql

一、source端add extract extl,vam,begin nowADD EXTTRAIL F:\ogg\mysql\dirdat\rl, EXTRACT EXTLedit params extlextract extlsourcedb testlocalhost:3306,userid root,password xifenfeiexttrail F:\ogg\mysql\dirdat\rldynamicresolutiongettruncatestable test.t_1;add E…