自适应居中

一、窗体居中

position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 

简析:

  position:固定位置显示(absolute|fixed);

    【absolute:窗口大小由上层position为absolute、fixed、relative的子父关系窗口决定;fixed:窗口大小由上层层position为fixed的子父关系窗口决定】

  top,right,bottom,left:设置偏移量(<value>|auto);

    【设置为auto时,表示窗口在该方向不居中显示;如:left:auto,则窗口在水平位置不居中显示】

  margin:自适应布局(auto);

    【窗口只会在都为auto的方向上居中】

  height,widht:可设置,也可不设置(<value>|auto);

    【不设置则由top,right,bottom,left决定大小】

二、文字、图片混合自适应居中

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }
.nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }
.nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }
.nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }

简析:

  .nav:限制窗口大小;

    【text-align:限制span水平居中】

  .nav-item:控制内容垂直居中;

    【display:限制内容并排显示】

  .nav span:限制图片显示范围;

    【padding-left:为图片留下显示空间;display:适应显示】

  .nav img:限制图片大小与显示位置;

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

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

相关文章

linux ip地址漂移,Linux 实现高可用性(HA) —之ip 漂移方法(vrrp)

在日常的系统管理当中,某些应用对可用性要求比较高,简单的冷备是不能满足需求,所以才需要双机热备即HA.根据此应用要求,我们介绍一个软件实现高可用性.keepalived是Linux下一个双机热备的软件&#xff0c;可提供vrrp以及health-check功能&#xff0c;目前仅用它提供双机漂移ip,…

Go语言核心之美 1.5-作用域

变量的作用域是指程序代码中能够有效使用这个变量的范围。不要将作用域和生命期混在一起。作用域是代码中的一块区域&#xff0c;是一个编译期的属性&#xff1b;生命期是程序执行期间变量存活的时间段。在此时间段内&#xff0c;变量能够被程序的其他部分所引用&#xff0c;是…

BootStrap_01之全局样式

1、响应式网页&#xff1a; ①Responsive Web Page&#xff1a;一个可以根据浏览设备的不同&#xff0c;而自动更改布局、图片、文字效果的网页&#xff1b; ②构成&#xff1a;不能固定宽度&#xff0c;必须流式布局&#xff1b;文字和图片大小随容器大小而改变&#xff1b;CS…

Java安全教程–创建SSL连接和证书的分步指南

在有关应用JEE安全性的系列文章中&#xff0c;我们为您提供了另一个有关如何在Java EE应用程序中创建SSL连接和创建证书的详细教程。 如我们之前的文章中所述&#xff0c; 安全套接字层&#xff08;SSL&#xff09;/传输层安全性&#xff08;TLS&#xff09;将启用客户端和Web服…

linux带宽最小的远程桌面,【图片】linux下哪种远程桌面服务最快?_linux吧_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼I stumbled upon this while researching xrdp, which is the only one you mentioned that I havent used. Some observations:NX Server: not so speedy (v3, still awaiting v4), might pose performance issues depending on y…

CentOS Vi编辑器

vim&#xff1a;通过vim a.cfg进入文档 i&#xff1a;编辑状态 ESC&#xff1a;返回不可编辑状态 dd&#xff1a;在不可编辑状态下&#xff0c;dd可删除光标所在的行&#xff0c;2dd删除两行&#xff0c;以此类推 u&#xff1a;在不可编辑状态下&#xff0c;u可恢复删除的行 yy…

[转]CSS hack大全详解

转自&#xff1a;CSS hack大全&详解 1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号&#xff0c;让不同的浏览器识别不同的符号&#xff08;什么样的浏览器识别什么样的符号是有标准的&#xff0c;CSS hack就是让你记住这个标准&#xff09;&#xff0c…

摆脱困境:将环境特定的Cron表达式与@Scheduled批注一起使用

Scheduled注释提供了一种在Spring驱动的应用程序中创建计划任务的简便方法。 我们可以使用它通过定期调度或cron表达式来调度我们的任务。 尽管时段调度也可能有用&#xff0c;但是cron表达式使我们对调度任务的调用有了更多的控制。 这就是为什么它们在现实生活中非常有用的原…

linux编译的so android闪退,android so库导致的闪退及tombstone分析

android中有3种crash情况&#xff1a;未捕获的异常、ANR和闪退。未捕获的异常一般用crash文件就可以记录异常信息&#xff0c;而ANR无响应表现就是界面卡着无法响应用户操作&#xff0c;而闪退则是整个app瞬间退出&#xff0c;个人感觉对用户造成的体验最差。闪退一般是由于调用…

产品经理应该具备的技能(2)如何做一个好的数据产品经理?

一、如何做一个好的数据产品经理&#xff1f; PD&#xff08;指产品经理&#xff0c;下同&#xff09;本身就是在做牛做马&#xff0c;关系圈异常复杂。数据PD也不例外。而且打交道的人更多。以下是我用PPT绘制的数据产品经理关系圈。如果你也做过 数据产品的产品经理&#xff…

C#取整函数Math.Round、Math.Ceiling和Math.Floor 【非原创,用来收藏,分享】

1.Math.Round&#xff1a;四舍六入五取偶 引用内容Math.Round(0.0) //0Math.Round(0.1) //0Math.Round(0.2) //0Math.Round(0.3) //0Math.Round(0.4) //0Math.Round(0.5) //0Math.Round(0.6) //1Math.Round(0.7) //1Math.Round(0.8) //1Math.Round(0.9) //1说明&#xff1a;对于…

谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

开本系列&#xff0c;谈谈一些有趣的 CSS 题目&#xff0c;题目类型天马行空&#xff0c;想到什么说什么&#xff0c;不仅为了拓宽一下解决问题的思路&#xff0c;更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性&#xff0c;题目天马行空&#xff0c;想到什么说什么&#x…

基于linux的netfilter处理数据包的过程分析,基于Netfilter的网络数据包分析

前面的几篇文章我已经对Netfilter的大概的机制作了比较详细的介绍&#xff0c;这篇文章我就说一下如何分析网络数据包。我刚刚写了一个程序&#xff0c;程序的功能很简单&#xff0c;就是提取出网络数据包的源地址和改包所使用的网络协议&#xff0c;大家可以看看源代码&#x…

Java EE CDI程序化依赖关系消歧示例–注入点检查

在本教程中&#xff0c;我们将看到在注入Java EE CDI bean时如何避免程序依赖消除歧义。 我们已经在Jave EE依赖关系消除歧义示例中展示了如何避免CDI Bean中的依赖关系歧义消除。 在这里&#xff0c;我们将向您展示如何以动态方式避免依赖消除歧义。 我们将通过检查注入另一个…

机器学习算法整理(四)集成算法—随机森林模型

随机&#xff1a;数据采样随机&#xff0c;特征选择随机 &#xff08;数据采样&#xff0c;有放回&#xff09; 转载于:https://www.cnblogs.com/douzujun/p/8386930.html

CSS 布局入门

概述 Web 兴起之后&#xff0c;关于CSS的介绍和学习资料已经铺天盖地。 本文不涉及具体的CSS语法之类的&#xff0c;而是希望从初学者的角度&#xff0c;让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。 什么是 CSS 了解一个概念&#xff0c;首先看到…

迷你搜索引擎–使用Neo4j,Crawler4j,Graphstream和Encog的基础知识

继续执行正在实现搜索引擎的Programming Collection Intelligence &#xff08;PCI&#xff09;的第4章。 我可能比做一次运动所咬的东西要多。 我认为&#xff0c; 与其一直使用本书中使用的普通关系数据库结构&#xff0c;不如说我一直想看看Neo4J&#xff0c;所以现在是时候…

linux人脸识别视频推流,RTMP推流协议视频智能分析/人脸识别/直播点播平台EasyDSS接口调用注意事项介绍...

TSINGSEE青犀视频目前推出了前端支持不同协议设备接入的视频智能分析平台&#xff0c;包括RTSP协议的EasyNVR、GB28181协议的EasyGBS&#xff0c;RTMP推流协议的EasyDSS&#xff0c;还有能够进行人脸识别、车牌识别的EasyCVR&#xff0c;这些平台均提供了视频转码分发的能力&am…

js高级写法

名称 一般写法优化取整(不四舍五入) parseInt(a,10); //Before Math.floor(a); //Before a>>0; //Before ~~a; //After a|0; //After 取整(四舍五入&#xff09; Math.round(a); //Beforenum.toFixed(0) a.5|0; //After未定义 undefined; //Before void 0; //After, 快…

IntersectionObserve API使用

why 之前图片懒加载的实现方法大多数为&#xff1a;给window添加scroll事件&#xff0c;滚动时获取元素的offset值&#xff0c;判断元素在viewport内的可见行。这样做的缺点是&#xff1a;频繁的计算dom节点的属性导致性能较差&#xff0c;对scroll绑定的回调函数进行节流能减少…