css垂直居中那点事

这是我技术博客生涯的第一篇文章,想想还是有点小鸡冻。。。菜鸟的征程现在要开始了

 

学习css的时候经常被各种问题纠结到不要不要的,没办法,只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们

 

不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦,反正我也被虐的挺惨

但是稍微整理一下,感觉好像垂直居中也就那么回事。

 

一,利用line-height

line-height是一个设置行高的一个css样式,一行文字上面的空白+下面的空白=行高

他可以帮助我们解决垂直居中的问题

当一个div中有1行文字(记住:是1行文字)需要垂直居中时,设置line-height=div的height可是使这一行文字垂直居中,但这个办法有点鸡肋,只能用在一行文字上,但是在文本框里面的光标解决上却很有用,现在的主流浏览器chrome,firefox,safari等等等在设置input=“text”时输入文字光标是会自动垂直居中的但是在老古董ie6,ie7,ie8上却会有问题,会变成这样:       很坑有木有???没办法这就是ie,这时我们加上line-height=文本框的height可以解决这个问题。

 

 

二,利用table

我们知道vertical-align分别是垂直居中,但是vertical-align只有在table中才能生效,这是我们就可以利用display来解决这个问题

<div>      →  display:table                                                                                                                                                                    

  <div>     →diaplay:table-cell           /*使这两个div模仿表格和表格单元,给vertical-align提供一个使用的环境*/

    我要垂直居中!!

  </div>

</div>

这时设置vertical-align:middle就可以生效了,(这个办法可以用于多行文字上)但是这个办法在ie上的支持不是很好

 

 

三,利用负边距

设置position:absolute→top:50%→margin-top:(-div中height的一般)

position:absolute的移动位移的中间点是在块级元素的正中间,但是移动距离的参考是父级元素(50%是父级元素的height的50%,而不是自己的50%),如果有两个div,父级div如果有设置position:absolute或者relative,那么子div就参照父级div来移动,如果父级的div没有设置position:absolute或者relative,那么就参考左上角(0.0)来进行移动。

这个办法可以使整个div垂直居中

 

 

四,利用伸缩盒(flexible-box)

伸缩盒现在有旧和新的两个版本,新版本有取代旧版本的趋势,本文使用的是旧版本的伸缩盒。(新版伸缩盒也可以实现)

利用伸缩盒解决垂直居中的问题也是一种好办法,但是在使用时需要加上-webkit-,-moz-,-ms-,-o-等前缀

我们同样需要利用display放一个box的容器:-webkit-display:box → 若文字是水平排列的使用:box-align:center  / 若文字是纵向排列的使用box-pack:center

 

 

当然,实现垂直居中还可以利用transform来实现等等,还有很多其他的办法,但是以我目前的总结,暂时总结到这4种,本人前端菜鸟,还请各位前端大牛勿喷。

 

 

以上内容均为原创,未经允许不许私自转载

转载于:https://www.cnblogs.com/Gary-Guoweihan/p/4728868.html

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

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

相关文章

Windows常用shell命令大全

From: http://blog.csdn.net/yunzhongfeiniao/article/details/6564577 基于鼠标操作的后果就是OS界面外观发生改变&#xff0c;就得多花学习成本。更主要的是基于界面引导Path与命令行直达速度是难以比拟的。另外Geek很大一部分是键盘控&#xff0c;而非鼠标流的。 整理Wind…

div模拟select/option解决兼容性问题及增加可拓展性

个人博客&#xff1a; http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式&#xff0c;比如line-height等&#xff0c;还会由此导致在IE8及以下版本浏览器中的各种问题。 这个模拟思路很简单&#xff0c;也很清晰&…

Linux Socket网络通信示例

记录一下Linux 网络通信编程示例&#xff0c;主要用内网穿透和网络调试助手进行调试。 1、源文件&#xff1a; #include <stdlib.h> #include <sys/types.h> #include <stdio.h> #include <netinet/in.h> #incldue <string.h> //bze…

stm32+lwip(四):网页服务器测试

ST官方有lwip的例程&#xff0c;下载地址如下&#xff1a; https://www.st.com/content/st_com/en/products/embedded-software/mcus-embedded-software/stm32-embedded-software/stm32-standard-peripheral-library-expansion/stsw-stm32070.html 本文例子参考ST官方给出的例…

Linux 用C/C++创建新文件并写入内容

1、需求 在Linux环境下用C编写一个函数&#xff0c;用于记录运行日志&#xff0c;要求只存在一个同名文件&#xff0c;每次记录前清除已有的信息。 2、思路 需要完成的是&#xff1a; &#xff08;1&#xff09;查找&#xff08;access&#xff09;是否该文件存在&#xff…

如何将Eclipse中的开源项目使用到Android Studio中

近几日&#xff0c;笔者用到了一些开源项目&#xff0c;比如著名的PTR项目。但是在使用的过程中&#xff0c;遇到了一些问题。 这个开源库是在Eclipse上面写的&#xff0c;我们现在开发用的是Android stuido。 两种软件的项目结构是不同的&#xff0c;那么怎么把PTR用到我们的项…

STM32 网络通信Web Server中 SSI与CGI的应用解析

本次主要解析STM32网络通信中WebServer应用&#xff0c;从网页界面的编写到浏览器与STM32之间进行通信的数据来说明SSI与CGI的原理及应用&#xff0c;并对GET与POST指令进行应用解析。 硬件和软件环境&#xff1a; 1.硬件环境&#xff1a;STM32F407&#xff0c;网卡芯片LAN87…

树莓派SSH 连接不上:socket error Event:32 Error:10053

问题如下&#xff1a; 解决办法&#xff1a;ssh文件夹下的文件权限问题。 cd /etc/ssh sudo chmod 0644 * sudo chmod 0600 ssh_host_ecdsa_key ssh_host_rsa_key登陆成功&#xff1a;

嵌入式设备web服务器比较

现在在嵌入式设备中所使用的web服务器主要有&#xff1a;boa、thttpd、mini_httpd、shttpd、lighttpd、goaheand、appweb和apache等。 Boa 1.介绍 Boa诞生于1991年&#xff0c;作者Paul Philips。是开源的&#xff0c;应用很广泛&#xff0c;特别适合于嵌入式设备&#xff0c…

UML造型——使用EA时序图工具的开发实践和经验

Enterprise Architect&#xff08;下面简称EA&#xff09;是一款基于OMG UML的可视化模型与设计工具。提供了对软件系统的设计和构建、业务流程建模和基于领域建模的支持&#xff0c;被企业和组织不仅应用于对系统的建模&#xff0c;还用于推进模型在整个应用程序开发周期中实现…

Qt QInputDialog文本输入对话框示例

1、代码如下 //引入头文件: #include <QInputDialog>//...//...//...//具体用法&#xff1a; bool isOK;//QInputDialog 是否成功得到输入 QString text QInputDialog::getText(NULL, "参数设定", "输入单次召测统计时间&#xff0c;eg.\"0:0:…

单元测试工具Numega BoundsChecker

From: http://blog.csdn.net/wangweitingaabbcc/article/details/7794985 1 前言 我在本文中详细介绍了测试工具NuMega Devpartner(以下简称NuMega)的使用方法。 NuMega是一个动态测试工具&#xff0c;主要应用于白盒测试。该工具的特点是学习简单、使用方便、功能有效。NuM…

在Codeigniter框架中使用NuSOAP

0、NuSOAP的简介 NuSOAP 是一组功能强大的PHP类&#xff0c;这个工具的发布让使用和创建SOAP消息变得相当简单。 NuSOAP有Dirtrich Ayala编写&#xff0c;可以无缝的与许多最流行的SOAP服务实现交互&#xff0c;它以LGPL协议进行发布。NuSOAP的主要特性包括&#xff1a; 简单&a…

Keil使用PC-Lint

Keil使用PC-Lint 随着项目的推进与迭代&#xff0c;一个Project的代码量往往会不知不觉增长&#xff0c;当项目代码达到数万行&#xff0c;迭代经历较长时间后&#xff0c;仅靠开发人员自身的代码质量已不能满足对整体质量的把控。难以避免会出现一些潜在的逻辑错误与非逻辑错误…

嵌入式产品开发流程

嵌入式产品&#xff0c;与普通电子产品一样&#xff0c;开发过程都需要遵循一些基本的流程&#xff0c;都是一个从需求分析到总体设计&#xff0c;详细设计到最后产品完成的过程。但是&#xff0c;与普通电子产品相比&#xff0c;嵌入式产品的开发流程又有其特殊之处。它包含嵌…

Codeforces 478B 6thweek contest_B

Random teams 题意&#xff1a; 有n个选手和m个队伍&#xff0c;让你分配&#xff0c;条件是每个队伍至少要有1个选手。分配完之后&#xff0c;每队伍里2个人可以组成一组&#xff0c;求分配完之后最多的组数和最少的组数 分析&#xff1a; 1. 最多的情况就是&#xff0c;先每…

如何Keil官网下载器件支持包Software Packs

步骤1&#xff1a;百度一下Keil&#xff0c;在搜索结果中点击打开官网 步骤2&#xff1a;在官网的搜索栏输入Software Packs&#xff0c;点击Go 步骤3&#xff1a;点击打开MDK Software Packs 步骤4&#xff1a;往下拉&#xff0c;找到自己需要的Pack 步骤5&#xff1a;以下载s…

为文档快速插入页眉和页脚

专业的文档往往需要配以漂亮的页眉、页脚等修饰性元素才会更加完美。在Word 2010中您不必再为设计漂亮页眉和页脚而大费周折&#xff0c;内置的“页眉样式库”和“页脚样式库”为您提供了丰富的选择余地。 &#xff08;1&#xff09;打开Word 2010文档&#xff0c;在“插入”选…

[BBS]搭建开源论坛之Jforum搭配开源CKEDITOR

本文作者&#xff1a;sushengmiyan本文地址&#xff1a;http://blog.csdn.net/sushengmiyan/article/details/47946065使用默认的编辑器的时候&#xff0c;格式都无法保存。现在按照上节的方法更改了编辑器。今天再对编辑器进行更改&#xff0c;适应jforum.效果如下图了。记录几…

Windows7休眠状态下载技巧攻略

Windows7休眠状态下载技巧攻略 你想让你的快车或者是迅雷通宵下载电影&#xff0c;而且还能省电么?或许你会说&#xff0c;我不关机&#xff0c;给迅雷和快车添加完下载任务&#xff0c;挂在那里不就可以了吗?这没错&#xff0c;开着电脑通宵下载是可以&#xff0c;但这样的方…