CSS行内元素和块级元素的水平居中,垂直居中,水平垂直居中实现

常用内联元素:a,img,input,lable,select,span,textarea,font
常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

一、水平居中

行内元素居中:
text-align:center

图片,单个块级元素居中:margin-left和margin-right设成auto
margin: 0 auto
或者
display:block
margin:0 auto

多块级元素水平居中
父元素:text-align: center
子元素:display: inline-block;

块级元素中的行内元素居中:
块级:text-align:center
行内:display:inline-block

弹性布局(flex),实现水平居中
父元素:
display: flex
justify-content: center
align-items:flex-end

块级元素水平居中:
父元素:
position: relative;
子元素:
position: absolute;
left: 50%;
margin-left: -333px;(元素的宽)
或者
transform来向左向上便宜半个内元素的宽
transform: translateX(-50%);

二,垂直居中

单行行内元素垂直居中:
height:40px
line-heigth:40px

多行元素垂直居中

1111111 
.center {   display: table;   width: 100%; } .center_text {   display: table-cell;   text-align: center;   vertical-align: middle; }

flex布局实现垂直居中
父元素:
display: flex;
flex-direction: column;
justify-content: center;

块级元素垂直居中:
父元素:
position: relative;
子元素:
position: absolute;
top: 50%;
transform: translateY(-50%);

三,水平垂直居中:

块级元素水平垂直居中:
父元素:
position: relative;
子元素:
position: absolute;
top: 50%;
left: 50%;
margin-left: -333px;(元素的宽)
margin-top: -200px;(元素的高)
或者
transform来向左向上便宜半个内元素的宽和高
transform: translate(-50%, -50%);

图片:
.img_wrap{
width:400px;
height:300px;
line-height:300px;
text-align: center;
}
.img_wrap img{
vertical-align:middle;
}

flex布局
父元素:
display: flex;
justify-content: center;
align-items: center;

在这里插入图片描述

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

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

相关文章

mysql scrapy 重复数据_大数据python(scrapy)爬虫爬取招聘网站数据并存入mysql后分析...

基于Scrapy的爬虫爬取腾讯招聘网站岗位数据视频(见本头条号视频)根据TIOBE语言排行榜更新的最新程序语言使用排行榜显示,python位居第三,同比增加2.39%,为什么会越来越火,越来越受欢迎呢,背后折射出的是人工智能、机器…

vim 文本一些行注释,替换

按键操作:注释:ctrlv 进入列编辑模式,向下或向上移动光标,把需要注释的行的开头标记起来,然后按大写的I,再插入注释符,比如"#",再按Esc,就会全部注释了。删除:先按v,进入visual模式,横向选中列的个数(如"#"注释符号,需要…

如何在几分钟内安装Red Hat Container Development Kit(CDK)

作为负责开发容器化应用程序提供的可能性的应用程序开发人员或架构师,将所有工具集中在一起以使您入门时几乎没有帮助。 到现在。 红帽容器开发套件(CDK) 安装变得简单! 红帽提供了一个容器开发套件(CDK&#xff0…

vue的使用(引用/创建vue项目)(一)

在程序开发中,有三种方式创建vue项目,本地引入vuejs、使用cdn引入vuejs、使用vue-cli创建vue项目。其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广泛。 一、vue本地引用 在官网下载vue.js,通过s…

你不知道的JS5-原型

1、原型 [[prototype]] js中的对象有一个特殊的[[prototype]]内置属性,其实就是对于其他对象的引用,几乎所有的对象在创建时[[prototype]]属性都会被赋予一个非空的值 使用for..in和in操作符都会查找对象的整条原型链 所有普通的[[prototype]]链最终都会…

enum 定义3个属性_和平精英:合金龙骨有3个隐藏属性,比玛莎“水下无敌”还唬人...

欢迎诸位小伙伴们来到天哥开讲的《和平精英》“精英那点事儿”~接下来呢,咱们聊聊合金龙骨的3个隐藏属性、土豪玩家“自投罗网”以及游戏里的“公主病患者”等有趣的玩家游戏经历与发现~得,废话不多说了,还是各位小伙伴们熟悉的“老配方”&am…

vue-cli项目引用文件/组件/库 的注意事项(一)

vue引入的问题 (1)main.js入口文件引入(项目中所有的页面都会加载main.js,所以用户放全局变量) // Element import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI) (2&am…

java中缓冲区和缓存_Java中的Google协议缓冲区

java中缓冲区和缓存总览 协议缓冲区是一种用于结构化数据的开源编码机制。 它是由Google开发的,旨在实现语言/平台中立且可扩展。 在本文中,我的目的是介绍Java平台上下文中协议缓冲区的基本用法。 Protobuff比XML更快,更简单,并…

三十七 Python分布式爬虫打造搜索引擎Scrapy精讲—将bloomfilter(布隆过滤器)集成到scrapy-redis中...

Python分布式爬虫打造搜索引擎Scrapy精讲—将bloomfilter(布隆过滤器)集成到scrapy-redis中,判断URL是否重复 布隆过滤器(Bloom Filter)详解 基本概念 如果想判断一个元素是不是在一个集合里,一般想到的是将所有元素保存起来,然后通过比较确定…

绩效管理的实际案例:2024年绩效提升重要方法

案例一:目标设定与衡量的艺术 背景:某科技公司每年都会为其全球员工设定年度目标。然而,这些目标往往过于模糊,导致员工不清楚自己需要完成什么。 问题:目标设定不清晰,导致员工感到困惑和不满。 解决方…

array python 交集_模糊数学Python库简介和评测

写在前面模糊数学是国内外许多工学、管理学研究生以上的选修甚至必修课程。但对于非数学专业而言,掌握模糊数学的各种计算方法、了解各种方法的用途(应用场景)其实要比理解模糊数学的“数学”理论要重要得多。目前在Matlab等数学工具中其实也…

使用Hibernate和Spring设置分布式Infinispan缓存

一个非常典型的设置–需要分布式缓存的spring / hibernate应用程序。 但是事实证明,设置并不是那么简单。 您显然需要缓存。 可以使用EhCache,Hazelcast,Infinispan,memcached,Redis,AWS的Elasticache以及…

Element UI 的使用

官方文档: https://element.eleme.io/#/zh-CN/component/installation 一、普通项目引入相关文件,使用elementui插件: (1)引入相关文件 (2)可以直接使用了 vue项目使用elementui 安装 &…

python基础十一之迭代器和生成器

可迭代 内置方法中含有__iter__的数据类型都是可迭代的,只要是可迭代的就可以使用for循环,反之亦然。 print(dir()) # dir()函数可以获取当前数据类型的所有内置方法 返回值是list print(__iter__ in dir([])) # 判断是否含有__iter__内置方法 迭代器…

架构设计器_大厂案例:马蜂窝大交通业务监控报警系统架构设计与实现

部门的业务线越来越多,任何一个线上运行的应用,都可能因为各种各样的原因出现问题:比如业务层面,订单量比上周减少了,流量突然下降了;技术层面的问题,系统出现 ERROR ,接口响应变慢了…

使用mpvue开发小程序

一、安装node.js 1、在官网中安装nodejs最新版本。地址:https://nodejs.org/en/download/,根据自己环境,进行下载安装。 2、安装完成后,进行nodejs版本及npm版本查看。 打开cmd命令行,输入 node -v 和 npm -v&#…

iOS----------UITextField实现过滤选中状态拼音

2018年上班的第二天,就这样背了一个大锅。我们项目中有一个搜索功能,在这一期的版本中,为了增强优化,去除了过滤空格的请求,这样或许能增加很好的用户体验,恰恰相反,偷鸡不成蚀把米。没想到苹果…

ai电磁组属于什么组_RPA+AI 创新案例挑战赛 2020 【专业组】amp;【校园组】优胜名单来也!...

大赛介绍本次大赛由 RPA 产业推进方阵为指导单位,来也科技为主办单位,面向所有来也科技合作伙伴及深圳地区大学生公开报名征集【专业组】&【校园组】参赛案例。RPA 产业推进方阵是在中国人工智能产业发展联盟指导下,由中国信息通信研究院…

GetSystemInfo()

关于“GetSystemInfo()”的详细信息,参考:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724381(vvs.85).aspx Getting Hardware Information 例程:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724423(vvs.8…

具有Spring Boot和Yeoman的单页Angularjs应用程序

我非常感谢yeoman之类的工具,它们提供了一种非常快速的方法来将不同的javascript库组合在一起成为一个一致的应用程序。 Yeoman提供了UI层,如果您需要开发服务层和静态资产的Web层,则打包的一种好方法是使用Spring Boot 。 我知道有像JHipste…