元素布局之排排坐、对齐齐

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>

实现步骤：
1. 设置outer内部inner方块居中：margin: 0 auto;
2. 设置inner方块内部的文字、输入框等行内元素水平居中：text-align: center;
  - 通过以上两步，实现了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>

元素布局之排排坐、对齐齐相关推荐

QML编程之旅 -- 元素布局
文章目录 QML编程之旅 -- 元素布局 1.Positioner(定位器) 2.重复器 3.锚点 QML编程之旅 – 元素布局概述: QML编程中可以用X,Y属性手动布局元素,但这些属性是与元素父 ...
Qt-qml元素布局
文章目录一.Positioner(定位器) 1.1.行列.网格定位 1.2.流定位(Flow) 1.3.重复器(Repeater) 四.Anchor(锚) QML编程中可以使用x.y属性手动布局元素 ...
QML基础 2 --元素布局（定位器、锚、绝对坐标）
QML元素布局(定位器.锚.绝对坐标) QML中主要有3种元素布局方式:绝对坐标(包括关联坐标).定位器(Poisitioners).锚(Anchors). 绝对坐标给出元素的(x,y)坐标即可确定 ...
CSS float影响其他元素布局解决方法
float会脱离文档流,会影响下一元素和父级元素布局解决方法:float用完后加:<div style="clear: both"></div> 例: & ...
HTML5新布局元素布局,HTML5新的布局元素
HTML5相对于HTML4新增了一些布局元素新增布局标签的优点: ⒈更加注重文档的结构内容而不是以什么形式展现出来 ⒉对人的友好,更加语义化,增加代码的可读性 ⒊对计算机友好,浏览器更容易解析新增 ...
示例 - 10行代码在C#中获取页面元素布局信息
最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...
Unity3D UI多元素布局
1.Grid Layout Group组件实现布局 1.新建空物体1,添加Grid Layout Group组件作为布局区域,把需要布局的对象作为布局区域的子物体. 2.新建空物体2,作为需要布局的对 ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...

元素布局之排排坐、对齐齐

元素布局之排排坐、对齐齐

1.水平居中

1.1 块状元素居中站

1.2 行内元素居中站

1.3 相互定位居中站

2.垂直居中

2.1 行内元素/单行元素垂直列队

2.2 块状元素

2.2.1 设置父级浮动布局实现

2.2.2 通过父级设置表格单元格显示实现

3.小案例演示

元素布局之排排坐、对齐齐相关推荐

最新文章

热门文章