元素布局之排排坐、对齐齐
HTML页面布局中,经常会碰到需要将一些标签元素排列对齐的情况,本篇文章就简单整理了元素水平居中和垂直居中的一些方法。
1.水平居中
1.1 块状元素居中站
-
margin:0 auto
:设置元素上下间距为0,左右边距自动,也即实现水平方向居中对齐<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之块状居中站</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 300px; border: 1px dashed green; } .did { width: 300px; height:150px; /*水平居中对齐*/ margin: 0 auto; border: 3px solid red; } </style> </head> <body> <div class="did"></div> </body> </html>
1.2 行内元素居中站
-
text-align:center
:通过设置其父级元素中文字水平居中的属性,实现行内元素水平居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之行内元素居中站</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 500px; border: 1px dashed green; } .outer { width: 600px; height:300px; margin: 0 auto; border: 3px solid red; /*行内元素居中对齐*/ text-align: center; } .inner { width: 300px; height: 150px; border: 3px solid blue; /*内部div是一个行内元素*/ display: inline-block; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
1.3 相互定位居中站
-
position及left/right定位实现居中
:-
先通过
position
设置父子元素之间的相互定位 -
在进行
left或者right
设置距离,从而间接实现居中定位该方法需简单计算下左边距或右边距,受子元素宽度影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之相互定位居中站</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 500px; border: 1px dashed green; } .outer { width: 600px; height:300px; border: 3px solid red; margin: 0 auto; /*父级元素设置定位*/ position: relative; } .inner { width: 300px; height: 150px; border: 3px solid blue; /*子级元素设置定位以及左边距或右边距*/ position: absolute; left: 25%; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
-
2.垂直居中
2.1 行内元素/单行元素垂直列队
-
line-height
:针对行内元素或单行元素,可设置当前子元素的line-height
与父元素的line-height
属性一致高度,便可实现垂直方向的居中对齐<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之行内元素居中站</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 500px; border: 1px dashed green; } .outer { width: 600px; height:100px; margin: 0 auto; border: 3px solid red; /*父级设置行内高度*/ line-height: 80px; } .inner { border: 3px solid blue; /*设置的行内高度与父级一致*/ line-height: 80px; } </style> </head> <body> <div class="outer"> <span class="inner">这是一个span</span> <span class="inner">这又是一个span</span> <span class="inner">这还是一个span</span> </div> </body> </html>
2.2 块状元素
2.2.1 设置父级浮动布局实现
-
display: flex; align-items:center
:针对块状元素,则是通过设置其为行内元素,同时设置父级元素为浮动布局、垂直居中排列即可实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之块状垂直居中站</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 500px; border: 1px dashed green; } .outer { width: 600px; height:300px; margin: 0 auto; border: 3px solid red; /*浮动布局,垂直方向为居中排列*/ display: flex; align-items: center; } .inner { width: 200px; height: 100px; border: 3px solid blue; /*内部div是一个行内元素*/ display: inline-block; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
2.2.2 通过父级设置表格单元格显示实现
-
display:tablecell;vertical-align:middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局之块状垂直居中站二</title> <style> * {margin:0px;padding:0px} body { width: 100%; height: 500px; border: 1px dashed green; } .outer { width: 600px; height:300px; border: 3px solid red; /*通过父级设置表格单元格显示实现*/ display: table-cell; vertical-align: middle; } .inner { width: 200px; height: 100px; border: 3px solid blue; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
3.小案例演示
-
如下一行元素,需求将文字、输入框、图片、按钮等实现垂直、水平居中排列(需位于绿框的正中央位置)
- 附上初始html代码
<div class="outer"> <!--内部内容--> <div class="inner"> <span class="text-title">请输入手机号及验证码:</span> <input class="phone" type="text" placeholder="请输入手机号" /> <input class="check_code" type="text" placeholder="验证码" /> <img src="img/code.png" alt="" /> <!--按钮--> <button class="btn">发送短信</button> </div> </div>
- 基础式样
<style> *{margin: 0;padding: 0;} .outer { width: 900px; height: 300px; margin: 0 auto; border: 3px dashed green; } .inner { width: 800px; height: 100px; } </style>
-
实现步骤:
- 设置outer内部inner方块居中:
margin: 0 auto;
- 设置inner方块内部的文字、输入框等行内元素水平居中:
text-align: center;
- 通过以上两步,实现了inner块及内部元素水平居中,如下图
- 设置outer内部inner方块居中:
-
接下设置inner方块垂直居中:通过设置父级outer的
line-height
属性实现.outer { width: 900px; height: 300px; margin: 0 auto; border: 3px dashed green; /*3.设置父级元素的行高*/ line-height: 300px; } .inner { width: 800px; height: 100px; /*1.inner块居中*/ margin: 0 auto; /*2.内部的行内子元素:水平居中对齐*/ text-align: center; }
-
最后,设置inner内部行内元素彼此垂直居中对齐即可
vertical-align: middle;
.inner span, .inner input, .inner img, .inner button { /*上述元素彼此垂直居中对齐*/ vertical-align: middle; height: 32px; }
-
完整html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素布局</title> <style> *{ margin: 0; padding: 0; } .outer { width: 900px; height: 300px; margin: 0 auto; border: 3px dashed green; /**/ line-height: 300px; } .inner { width: 800px; height: 100px; /*1.inner块居中*/ margin: 0 auto; /*2.内部的行内子元素:水平居中对齐*/ text-align: center; } .inner span, .inner input, .inner img, .inner button { /*上述元素彼此垂直居中对齐*/ vertical-align: middle; height: 32px; } </style> </head> <body> <div class="outer"> <!--内部内容--> <div class="inner"> <span class="text-title">请输入手机号及验证码:</span> <input class="phone" type="text" placeholder="请输入手机号" /> <input class="check_code" type="text" placeholder="验证码" /> <img src="img/code.png" alt="" /> <!--按钮--> <button class="btn">发送短信</button> </div> </div> </body> </html>