-
2019-04-20 21:50:18
居中是前端开发过程中最常见的布局,但是很多人都不清不楚,每次就靠试一试,今天就拎一拎~~
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习居中</title> <style> .father { height: 200px; width: 200px; border: 1px solid #000; text-align: center; /* 水平居中,只对图片、文字、按钮等行内元素(display:inline/inline-block)居中 */ } .childa { background-color:#d0e4fe; height: 50px; width: 50px; margin: auto; /*margin: 0 auto;*/ /* 水平居中,且对浮动元素(float:right/left)和绝对定位(position:absolute)元素无效 */ } .childb { font-family: "Times New Roman"; font-size: 20px; height: 50px; line-height: 50px; /* 单行文字的垂直居中,只适用于一行文字的情况,line-height === height */ } #wrapper { display: table; } #cell { height: 200px; width: 200px; border: 1px solid #000; display: table-cell; vertical-align: middle; /* 垂直居中,父设置为table元素,自己为table-cell元素,vertical-align:middle;子垂直居中 */ } .tablediv{ width: 100px; height: 100px; background: #d0e4fe; /* 水平垂直居中,(th tr td设置)align:center; */ /* 垂直居中,(th tr td设置)valign:center; */ } .box{ height: 200px; width: 200px; position: relative; border: 1px solid #000; } .content-box{ width: 50px; height: 50px; position: absolute; background-color: #d0e4fe; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; /* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:50%;left:50%;margin-top:-自身高度的一半;margin-left:-自身宽度的一半; */ } .content-box2{ width: 50px; height: 50px; position: absolute; background-color: #d0e4fe; top: 0; left: 0; right: 0; bottom: 0; margin: auto; /* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:0;left:0;right:0;bottom:0;margin:auto; */ } .content-box3{ width: 50px; height: 50px; position: absolute; background-color: #d0e4fe; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 水平垂直居中,父设置为position:relative;子设置为position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); */ } .flex{ height: 200px; width: 200px; display: flex; border: 1px solid #000; justify-content: center; /* 水平居中,父设置为display:flex;justify-content:center; */ align-items: center; /* 垂直居中,父设置为display:flex;align-items:center; */ } </style> </head> <body> <div class='father'> <div class='childa'></div> <div class='childb'>343434</div> </div> <div id="cell"> <div class="content">Content goes here</div> </div> <table border='1'> <tr valign="center"> <td height='200' width='200' > <div class='tablediv'></div> <span>67677</span> </td> </tr> </table> <div class="box"> <div class="content-box"></div> </div> <div class="box"> <div class="content-box2"></div> </div> <div class="box"> <div class="content-box3"></div> </div> <div class="flex"> <div class="tablediv"></div> </div> </body> </html>
更多相关内容 -
HTML之三种居中
2018-03-22 21:22:05HTML之三种居中,1.表格布局页面居中,2.div布局页面居中,3.框架布局页面居中 -
web前端教程之页面元素水平居中
2021-04-13 11:10:23小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候,往往面临着方法的选择,而各种方法有的简单,有的困难,还有的有一些坑,在选择方法时我们应该怎么做才能不走弯路呢? 话不多说,现在就来分享...小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候,往往面临着方法的选择,而各种方法有的简单,有的困难,还有的有一些坑,在选择方法时我们应该怎么做才能不走弯路呢?
话不多说,现在就来分享我的一些方法,在分享之前我先查查秘籍
咳咳,下面是正式内容,以我们最常见的网页为例
上图网页中,红框部分内的左右元素都是水平居中显示的,其中既有大小不一的文本又有图片,面对这种情况只要我们解决其中一个,另外三个就很简单了,那么这一个我们应该怎么处理呢
水平居中方法:
对于元素水平居中常用我们有二种办法:
方法一:text-align:center文本在容器里水平居中,让inline与inline-block在容器里水平居中,text-align添加给父元素。
方法二:margin: 0 aut0; 让一个有宽度的块元素在容器(父元素)里水平居中,margin: 0 auto添加给当前元素。
(除此之外如果知道详细的布局数据。也可以根据情况手动设置margin或padding等元素调整,不过不建议使用,有毒副作用)
图片:
首先是图片,在选择方法之前,我们应该知道图片的类型是inline-block类型,在选用方法时对于经常使用方法二的人就需要注意,margin: 0 auto;的适用对象是有宽度的块元素,图片本身自然有宽度,但并不是块元素,需要先将其通过display: block;将图片转化为块元素才能使用方法二。
相比而下,方法一就很简单了,无需转化元素类型,直接在父元素内使用该属性即可。
文本:
其次是文本,文本的嵌套既有使用inline类型父元素嵌套的,又有使用block类型嵌套的。针对不同的情况,我们选用的方法也不同。
1.嵌套inline类型的父元素,若想水平居中则在父元素下添加text_align:center;
2.嵌套block类型的父元素,若想水平居中则在本身元素下添加margin: 0 auto;
垂直居中方法:
方法一:line-height:行高高度等于容器高度,只能实现单行文本在容器里垂直居中,line-height添加给容器。
方法二:vertical-align: middle;使一个inline-block类型的元素垂直居中。
方法三:通过定位,为需要垂直居中的元素设置absolute类型的定位,然后给父元素设置relative类型的定位,然后
- top:0;
- left:0;
- right:0;
- bottom:0;
- margin:auto;
或者:
- top:50%;
- left:50%;
- margin:-NNpx 0 0 -NNpx;
- /*NN为元素宽高的一半**/
方法二有毒,需要4个条件!!!
1.给当前元素在结构上添加一个弟弟元素(必须和当前元素写在一行上)
2.给当前元素和弟弟添加display:inline-block;
3.给弟弟添加height与父元素同高
4.给当前元素和弟弟元素添加vertical-align:middle;
所以对于文本,我们使用方法一简单方便。对于元素类型为inline-block的图片,我们使用方法二或方法三都可以。对于block类型,我们就使用方法三。
再回到我们的网页,其实还是水平居中用的较多,水平居中设置完毕后,垂直方向的距离可以用margin与padding进行调整,这样很快就写好了。
其实最主要的合适头脑清晰,合理选择方法,选对了就会写的顺利,否则选错方法就这一堆堆的坑填都填不完,成都web前端培训。
-
web前端开发中的各种居中
2017-11-20 19:21:45一,水平居中 方法① :行内元素 (父元素)text-align,(子元素)inline-block .parent{text-align: center;} .child{display: inline-block;} 总结: 优点:兼容性好,支持低版本浏览器 缺点:需要同时...一,水平居中
方法① :行内元素 (父元素)text-align,(子元素)inline-block
.parent{text-align: center;} .child{display: inline-block;}
总结:
优点:兼容性好,支持低版本浏览器
缺点:需要同时在父元素和子元素上设置
适用场景:子元素数量少(或只有一个),并且需要兼容低版本浏览器时使用,不受float影响
方法②:块状元素 使用margin:0 auto来实现
.child{width:200px;margin:0 auto;}
优点:兼容性好
缺点:需要指定宽度
前提:用于子元素上,不受float影响
方法③:(子元素)display:table;margin:0 auto;
.child{display:table;margin:0 auto;}
优点:只需要对自身进行设置
缺点:不兼容IE6和IE7
适用场景:子元素数量多,不方便修改父元素的属性,对浏览器版本要求相对较低时使用
方法④:决定定位实现 (父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))
.parent{position:relative;} /*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/ .child{position:absolute;left:50%;transform:translate(-50%);}
优点:不影响其他元素
缺点,transform兼容性,IE9及以上可用
方法⑤:flex+justify-content/margin
/*第一种方法*/ .parent{display:flex;justify-content:center;} /*第二种方法*/ .parent{display:flex;} .child{margin:0 auto;}
第一种方法:
优点:只设parent
缺点:flex兼容性差,而且比较耗资源
第二种方法:
优点:代码简单
缺点:污染父元素,flex兼容性问题,如果进行大面积的布局可能会影响效率
二,垂直居中
方法① :单行文本 设置line-height等于父元素高度
.child{ height:20px; line-height:20px}
优点:代码简单
缺点:只适合一行文本,多行文本则不可以
这是一种很流行的方法, 也适应IE7.
方法② :行内块级元素 使用display:inline-block; vertical-align:middle;
.child{display:inline-block; vertical-align:middle} .parent:after{display:inline-block; vertical-align:middle}
方法③ :块级元素 使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
/*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;} /*第二种方法*/ .parent{display:inline-block;vertical-align:middle;line-height:20px;}
优点:兼容性比较好,换成table可以兼容IE6,7
缺点:table-cell不能和float、position:absolute同时设置。(只能在外parent外套一层div.wrap才能设置float)
若元素的高度不一定的话
vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
/*第一种方法*/ .parent{display:table} .child{display:table-cell;vertical-align:middle;}
优点:元素高度可以动态改变,不需要css定义,如果父元素有足够空间,该元素不会被截断
缺点:IE6、7,甚至IE8 beta中无效
方法④:使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题
方法⑤:使用flex实现方法 (父)flex + align-items.parent{display:flex;align-items:center;}
优点:只要设置parent
缺点:flex和align-items的兼容性
三、【终极需求】水平垂直同时居中!
方法①:元素高度固定
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}适用于所有浏览器
方法②:元素高度固定
.parent{position:relative;} .child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto;}
适用于所有浏览器
方法③:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}方法④:使用绝对定位
.parent{position:relative;} .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题
方法⑤:利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
优点:只要设置parent
缺点:flex和align-items的兼容性
-
总结一下web六大居中方式
2019-11-10 23:35:55利用伪类元素居中 <!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中1</title> <style> *{margin:0;} div{width:200px;height:300px;border:2px ...第一种
利用伪类元素居中
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中1</title> <style> *{margin:0;} div{width:200px;height:300px;border:2px solid #000;margin:200px auto; text-align:center;font-size:0; } div p{width:100px;height:100px;background:#666; display:inline-block;vertical-align:middle; } div:after{content:"";display:inline-block;height:100%;vertical-align:middle;} </style> </head> <body> <div> <p></p> </div> </body> </html>
这种居中方式适合两个元素套在一起,然后居中子元素的方式
第二种
定位居中
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中2</title> <style> *{margin:0;} div{width:200px;height:300px;border:2px solid #000;position:absolute; left:0;right:0;top:0;bottom:0;margin:auto; } </style> </head> <body> <div> <p></p> </div> </body> </html>
个人比较喜欢这种居中方式,配合margin使用,简单粗暴。
第三种
定位居中2
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中3</title> <style> *{margin:0;} div{width:200px;height:300px;border:2px solid #000;position:absolute; left:50%;top:50%;margin:-150px 0 0 -100px; } </style> </head> <body> <div> <p></p> </div> </body> </html>
这种居中方式也还挺好用,但是前提是要知道元素的属性,个人不太喜欢这个。
第四种
定位居中3
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中4</title> <style> *{margin:0;} div{width:200px;height:300px;border:2px solid #000;position:absolute; left:50%;top:50%;transform:translate(-50%,-50%); } </style> </head> <body> <div> <p></p> </div> </body> </html>
这个居中方式的话是有一定的兼容性的,因为要用到transform 这个属性,但是同样很简单。
第五种
弹性盒居中1
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中5</title> <style> *{margin:0;} html,body{height:100%;} body{display:flex;justify-content:center;align-items:center;} div{width:200px;height:300px;border:2px solid #000;} </style> </head> <body> <div> </div> </body> </html>
弹性盒居中方式,给父元素设置弹性盒模型,配合justify-content:center;align-items:center。
第六种
弹性盒居中2
<!doctype html> <html> <head> <meta charset="utf-8"> <title>五大居中5</title> <style> *{margin:0;} html,body{height:100%;} body{display:flex;} div{width:200px;height:300px;border:2px solid #000;margin:auto;} </style> </head> <body> <div> </div> </body> </html>
这也是我最喜欢的居中方式,直接给父元素设置弹性盒,子元素margin:auto。
-
cssa标签设置成block后,怎么让文字垂直居中_html/css_WEB-ITnose
2021-08-04 05:20:38唉,好像挺老的问题,但是我怎么弄不到居中的。我vertical-align试过了,用height 跟line-height相等我试过了,不行。 免责声明 个人信息 密码修改后来我以为height:100%,有问题,然后我初始化的时候,动态修改css的... -
li 标签中放a 标签,文字垂直居中
2021-03-14 19:08:03对标系统绩效考核内部数据外部数据系统管理上面这段代码中,想让a标签中的文字居中,需要设置li标签的line-height 和height属性;.imageA{background-image:url(../App_Themes/DefaultTheme/images/top_nav.jpg);... -
html里文字居中代码怎么写?_WEB前端开发
2020-12-20 10:17:14web前端是什么意思?_WEB前端开发web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流。html里文字居中代码怎么写?下面... -
Html5中新增标签与样式实现元素水平垂直居中的方法
2021-06-19 08:10:51Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51来源:亿速云阅读:71作者:小新这篇文章将为大家详细...元素的水平垂直居中1、利用table标签,自带的功能.parent{border:1pxsolidr... -
html怎么让图片居中_WEB前端开发,html,文字居中
2020-12-20 10:17:19ps扣完图怎么提取出来_WEB前端开发ps扣完图提取出来的方法:首先打开ps并打开需要抠的图片;然后选择钢笔工具,沿着物体外部,勾画闭合路径;接着依次选择“建立选区或者切换到路径面板-建立选区”;最后反选完成... -
html里文字居中代码怎么写?_WEB前端开发,html,css
2021-01-12 12:14:32web前端是什么意思?_WEB前端开发web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流。html里文字居中代码怎么写?下面... -
图片文字居中显示
2018-11-28 16:22:18图片再上,文字在下,在屏幕中居中显示,内置CSS样式。 -
html h1怎么居中,如何在h1标签内水平居中span元素?
2021-06-23 01:55:28我真正想要实现的是将页面标题放在span(它位于h1标签内)中,而不管它的宽度如何。 我试图做这样的事情: #page-title-inner { width: auto; float: left; background: #fff; margin: 0 auto; display: block; } ... -
css怎样使文字居中?
2020-12-20 10:17:10在CSS中,可以使用text-align属性来使文字水平居中;使用line-height属性来使单行文字垂直居中、使用vertical-align:middle +display:table-cell使多行文字垂直居中。下面本篇文章就来给大家介绍一下。1、使用text-... -
web前端 如何使div中的img图片居中 HTML和CSS的操作
2020-04-10 00:56:17一些工作中的小问题的记录。 HTML端代码:插入一张图片 <div class="xiaoxun"> <img src=...width="1000" height="52" >...CSS端代码:控制居中 .xiaoxun{ height: 52px; backgro... -
表格标签 table标签 tr标签 单元格间距 单元格居中加粗 表单居中
2020-09-21 19:53:42table标签 table标签是表格标签 用这个可以创建一个表格 在标签中可以设置表格的相关属性 tr标签和td标签 一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格(一行中的一个元素) ... -
web前端开发中css垂直居中布局的三个解决方案
2021-06-17 01:34:31css垂直居中布局要求子元素在父元素垂直居中,并且子元素与父元素高度均为可变的。垂直居中布局解决方案通用html方案一:使用table-cell和vertical-align实现垂直居中布局通过设置.parent{display:table-cell;... -
web 基本标签
2019-03-19 08:07:25<!DOCTYPE html> <!... <...-- 根标签 --> <!--ctrl+/ 单行注释 ctrl+ shift+/ 多行注释--> <head> <!--媒体标签 解释语言 charset=‘utf-8’字符编码--> ... -
CSS设置行内元素和块级元素的水平居中、垂直居中_html/css_WEB-ITnose
2021-06-13 05:33:12CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/PS:当然,如果既要水平居中又... -
Web前端开发-垂直居中
2018-04-24 23:05:46Web前端开发,自学笔记整理 垂直居中 1.垂直居中问题-1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&... -
CSS网页布局:div水平居中的各种方法
2020-12-12 20:54:47在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用... -
web前端:css自适应居中方法总结
2021-06-18 04:13:40下面来看一个最简单的小案例,在浏览器窗口居中一个小盒子: ...标签结构如下: 方法一:大伙熟知的居中方法 这种方法很简单,也很直观,但是有一定的局限性,就是固定了盒子的宽高,写死了margin值,而且需要一定的... -
web中常用的标签
2021-04-25 11:39:53(一)web中常用的标签: 1、加粗:或者是 2、倾斜: 或者是 3、删除线:或者是 4、下划线:或者是 5、超链接标签:文本或图像 target用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式... -
css文字居中怎么弄?
2020-12-30 05:33:36CSS是一种定义样式结构如...css可以通过为文字所在标签添加text-align:center样式使文字居中,text-align属性规定元素中的文本的水平对齐方式。示例:div{width: 500px;height: 100px;border: 1px solid red;text-al... -
设置 line-height 后,a标签仍然不能居中
2022-04-02 21:30:47实际上即使给a指定了 line-height: 12px ,也无法居中,会发现实际高度为15.85px,改的再小也都是这个数,直到把 li 的行高改为15.85px,a再指定 line-height: 15.85px 后,实现了居中。这和文字大小有关系,实际上... -
Web前端基础(十):CSS实现水平垂直居中的方式
2022-04-06 09:59:23CSS实现水平垂直居中的方式 -
css中怎么让img图片居中
2021-06-12 08:13:33css中怎么让img图片居中发布时间:2020-09-14 10:36:52来源:亿速云阅读:80作者:小新css中怎么让img图片居中?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家... -
web元素水平垂直居中实现方案总结
2020-03-07 10:49:32水平居中: 对于行内元素:text-align:center; 对于确定宽度的块级元素: 1.width加margin实现,width固定宽度,margin: 0 auto;...1.table标签配合margin左右auto实现水平居中。使用table标签(或... -
css3怎么让文字垂直居中显示?
2020-12-20 10:17:13css3怎么让文字垂直居中显示?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。文字容器高度固定,但容器内部文字个数不知,但要求文字部分垂直居中,利用css3的flex... -
css如何让文字居中?
2020-12-20 10:17:10css如何让文字居中?下面本篇文章就来给大家介绍一下使用css让文字居中(水平、垂直)的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、CSS设置文字水平居中在CSS中可以使用text-align属性...