水平居中布局
text-align: center;
-
字面意思:用来控制自己标签内的文字是否居中
-
如果其子元素是
inline
元素、inline-block
元素,会使其居中 -
如果其子元素本来是
block
元素通过转换的方式display: inline;
或display: inline-block;
,也会使其居中 -
常见的inline内联元素:
- 纯文字, span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)
-
常见的inline-block元素:
- img、input、button
优点:
- 浏览器兼容性好
缺点:
- text-align具有继承性,这样就会导致其子级元素的
inline
元素和inline-block
也是居中显示
缺点解决方案:
- 重新设置子级元素的
text-align
属性,可能会比较麻烦
margin: 0 auto;
- 只需要对子级元素本身设置就可以实现居中
- 只对
block
元素有效,inline-block
无效
缺点:
- 如果子级元素脱离文档流,导致margin属性无效
position+left+transform
垂直居中布局
vertical-align属性
优点:
- 浏览器兼容性比较好
缺点:
- vertical-align属性具有继承性,导致父级元素的文本也是居中显示的
.parent{ width: 200px; height: 200px; background-color: antiquewhite; display: table-cell; vertical-align: middle; } .child{ width: 50px; height: 50px; background-color: blueviolet; } <div class="parent"> <div class="child"> </div> </div>
position+top+transform
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .parent{ width: 200px; height: 200px; background-color: antiquewhite; position: relative; } .child{ width: 50px; height: 50px; background-color: blueviolet; position: absolute; top:50%; transform: translateY(-50%); } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
水平and垂直居中例子
代码图
水平and垂直居中.html
关键代码
<!doctype html> <html> <head> <title>无标题文档</title> </head> <style> .outer{ width:400px; height:400px; border:1px solid red ; position:relative; } .inner{ width: 100px; height: 100px; background-color: rosybrown; position: absolute ; top:50%; left:50%; margin-top: -50px; margin-left: -50px; } </style> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
inline、block、inline-block元素
inline元素
inline元素全称Inline Elements,
英文原意:An inline element does not start on a new line and only takes up as much width as necessary.
一个内联元素不会开始新的一行,并且只占有必要的宽度。
特点:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。
block元素
block元素全称Block-level Elements,
英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)
特点:
每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);
元素的高度、宽度、行高以及顶和底边距都可设置;
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
inline-block元素
inline-block元素,
英文释义:inline-block elements are like inline elements but they can have a width and a height.
它像内联元素,但具有宽度和高度。
特点:
和其他元素都在一行上;
元素的高度、宽度、行高以及顶和底边距都可设置
常见的inline内联元素:
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block))
常见的block块级元素:
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form
常见的inline-block内联块元素:
img、input
区别
-
块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
-
块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效(可以设置行高)。
-
块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战