HTML水平居中和垂直居中
1.水平居中
(1) 文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
(2) 确定宽度的块级元素的水平居中
通过设置margin-left:auto;和margin-right:auto;来实现的。
(3) 不确定宽度的块级元素的水平居中
方法一:
使用table标签,table本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!
将需要居中的部分包含在table标签内,对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中,间接使需要居中的部分水平居中。
缺点:增加了无语意标签,加深了标签的嵌套层数。
方法二:
改变块级元素display为inline类型,然后使用text-align:center来实现居中。
较方法一,好处是不用增加无语义标签,简化了标签的嵌套深度。坏处,将块级元素的display类型改为inline,缺少了一些块级元素的功能,比如高宽。
方法三:
通过给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置了position:relative,带来一定的副
2.垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下边距实现的,即设置padding-top和padding-bottom。
(2)父元素高度确定的单行文本的垂直居中
通过给父元素设置line-height来实现,line-height值和父元素高度值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
CSS中有一个用于垂直居中的属性vertical-align,但只有当父元素为td或者th时,这个属性才生效,对于其他块级元素,如div,p等,默认情况下是不支持vertical-align属性的。在firefox和ie8下,可以设置块级元素的display:table-cell来激活vertical-align属性,但ie6和ie7并不支持display:table-cell。
方法一:
直接使用table,因为td标签默认下就隐式设置了vertical-align:middle。
方法二:
对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。
HTML水平居中和垂直居中相关推荐
- css水平垂直居中_css 如何实现水平居中、垂直居中(超全面)
前言:元素一般分为 块级元素 和 行内元素 块级元素可以设置高度,宽度,行内元素则不能,如果非要给行内元素设置宽高,只需要将 display 属性设置为 inline-block 即可 一.水平对齐 ...
- HTML元素水平居中和垂直居中
目标:设置html元素水平居中和垂直居中,介绍三种方法. 方法一:推荐,兼容性好,没有冲突 <!DOCTYPE html> <html lang="en"> ...
- php垂直居中代码_div标签:水平居中和垂直居中的实现(附代码)
本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居 ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技 ...
- CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果 水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
- POI单元格合并(合并后边框空白修复)、自动列宽、水平居中、垂直居中、设置背景颜色、设置字体等常见问题
POI单元格合并.自动列宽.水平居中.垂直居中.设置背景颜色.设置字体等常用方法 POI设置单元格样式 POI设置文字 POI设置边框样式 POI设置文字水平居中.垂直居中 POI设置背景颜色 POI ...
- bootstrap 页面垂直居中_bootstrap4如何实现div的水平居中以及垂直居中
bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstrap会提高工作效率,减少自己写css样式的麻烦.鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的,当 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- CSS水平居中,垂直居中,水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
- CSS实现水平居中与垂直居中
CSS实现水平居中与垂直居中 一.水平居中 1. 必备知识 1.1 text-align 属性 1.2 display 属性 1.3 margin 属性 1.4 position 属性 1.5 tra ...
最新文章
- 计算机能力操作系统试题,全国计算机一级考试操作系统论述题及答案
- python使用input函数时、必须添加提示文字-Python中使用 input 函数来获取输入
- 线程,进程,协程详细解释
- SAP Fiori launchpad的PageChipInstance实现
- Js自定义提示框(dialog版本)
- java数学系统总结与展望_总结与展望
- Wi-Fi 爆重大安全漏洞,Android、iOS、Windows 等所有无线设备都不安全了
- ENTBOOST V2014.183 Linux发布,开源企业IM免费企业即时通讯
- 【实验】简单实时300点采样逻辑
- unknown type name err_status_t; did you mean srtp_err_status_t/err_status_ok/err_status_replay_fail
- Unity OnPostprocessTexture 和 OnPreprocessTexture 使用注意事项
- 高铁检测试验软件,高铁规划要点及测试情况分析
- 实战 | 电感元件定位--Halcon与OpenCV实现详解(附源码)
- 各种手机处理器排行榜_手机处理器CPU性能排名
- win10点击关机后不能正常关机的处理
- Java之自定义异常类、常用类String、StringBuilder、StringBuffer、时间类和枚举类的学习
- Python opencv:人眼/人脸识别并实时打码处理
- 2022-07-10 第七小组 闫馨月 学习笔记
- 本科去向选择之一——保研
- 163 android设置字体,设置关于安卓手机设置163邮箱的步骤方法