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

最新推荐文章于 2024-07-09 10:20:31 发布
最新推荐文章于 2024-07-09 10:20:31 发布
阅读量411 收藏 1
点赞数
分类专栏： 前端 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yalenlang_long/article/details/111054807
版权

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

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定位实现居中：

    1. 先通过position设置父子元素之间的相互定位

    2. 在进行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块及内部元素水平居中，如下图

在这里插入图片描述

  1. 接下设置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;
}

    在这里插入图片描述

  2. 最后，设置inner内部行内元素彼此垂直居中对齐即可vertical-align: middle;

    .inner span, .inner input, .inner img, .inner button {
    /*上述元素彼此垂直居中对齐*/
    vertical-align: middle;
    height: 32px;
}

    在这里插入图片描述

  3. 完整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>
yolenlew
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5.（vue3.x+vite）水平垂直居中实现方式
GIS之家家长
09-22 536
5.（vue3.x+vite）水平垂直居中实现方式
css对齐方式
weixin_42371145的博客
07-24 2447
1、被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center /left/right 来实现的。 button、input、select、textarea、img、progress、 2、当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的，...
Vue项目中使用Html+Css使div在页面中居中显示(水平+垂直)
热门推荐
wenqi
11-04 2万+
今天突然想改一下自己写的项目中登录页面的样式，于是行动，在加入记住我按钮后，发现input输入框没有居中显示，于是把input 和其他的一些标签整合到一个div层中，但是整个div的样式要居中显示，于是乎找到一些修改的方法，以下内容： 1）div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 .main{ text-align: center; background-color: #fff; border-radius: 2
html整体居中文字,html里文字居中代码怎么写？
weixin_42186015的博客
05-30 2396
html里文字居中代码怎么写？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。文字水平居中水平居中.box {width: 300px;height: 200px;background: palegoldenrod;text-align:center;}水平居中了--文本文字效果图：说明：text-aligntext-align是一个基本的属性，它会影响...
css标签显示模式
Gnemoah6的博客
09-09 1231
标签显示模式 1.1.1） 块级元素（block-level） 常见的块级元素<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是典型的块元素。 块级元素的特点 （1）比较霸道，自己独占一行 （2）高度，宽度，外边距和内边距都可以控制 （3）宽度默认是父元素宽度的100% （4）是一个容器及盒子，里面可以放行内或者块级元素 1.1.2 ）行内元素（inline-level）
大班语言排排坐教案反思.docx
12-07
【大班语言教育活动——《排排坐》教案与反思】 大班阶段是儿童语言发展的重要时期，良好的语言教育能够帮助孩子们更好地表达自己的想法，增进人际交往能力。本教案以《排排坐》这首儿歌为载体，旨在通过教学活动，...
幼儿园小班音乐优秀教案《排排坐》含反思.docx
01-16
幼儿园小班音乐优秀教案《排排坐》含反思 本教案旨在通过学习儿歌《排排坐》，让幼儿园小班学生理解并把握儿歌内容，养成良好的常规习惯，懂得谦让共享，恪守社会行为规章，不做"制止"的事。同时，通过教学活动，...
2016湘艺版音乐二年级下册第4课《排排坐》课件
11-23
2016湘艺版音乐二年级下册第4课《排排坐》课件
排排坐二年级音乐PPT学习教案.pptx
10-08
这篇PPT学习教案是针对二年级学生的音乐课程设计的，主要教授的是歌曲"排排坐"，并结合了对各种水果的认知，旨在提高孩子们的音乐素养和对家乡文化的了解。 首先，PPT从基础的音乐理论知识入手，通过"ＸＸＸ　...
vue 前端使空间水平和垂直居中的一种简便方法
一个黑曼巴的博客
06-24 1659
1.将组件的left top right bottom 全部设置为0， 2.margin：auto 最终就会水平和垂直都居中
vue实现长图垂直居上 vue实现短图垂直居中
08-29
主要为大家详细介绍了vue弹性布局实现长图垂直居上，vue实现短图垂直居中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue项目中让元素垂直居中比较好用的方法
qq_45228330的博客
02-24 6627
Vue项目中让元素垂直居中比较好用的方法 直接将下面的样式写在需要用的元素上 .upLoad-btn { position: relative; top: 50%; /*偏移*/ transform: translateY(50%); text-align: center; }
vue固定比例垂直水平居中
最新发布
qq_36313551的博客
07-09 429
最近要写的页面需要固定比例的自适应，当当前页面比例小于1920*1080时，网页内容的左右会接触浏览器的左右边，垂直居中；当页面比例大于1920*1080时，网页内容的上下会接触浏览器的上下边，水平居中。如此引用，即可让内容块固定比例自适应缩放，适应各种大小的电脑或浏览器。宽高比大于1920:1080时，上下边接触浏览器边界。宽高比小于1920:1080时，左右边接触浏览器边界。
css 水平垂直居中
zzzzoe_的博客
01-15 759
相对于页面对块元素进行垂直居中 .login { position: absolute;; width: 5rem; top: 50%; left: 50%; transform: translate(-50%,-50%); }
Vuetity水平垂直居中
老码农重操旧事业
12-31 1392
Vuetify 水平垂直居中，通过v-layout、v-flex以及v-container的fill-height属性。 <template> <v-container class="fill-height"> <v-layout align-center align-content-center> <v-flex> <v-container> <v-row class="text-
VUE中文字垂直居中
柳鲲鹏
03-22 578
【代码】VUE中文字垂直居中。
【vue】css3实现水平垂直居中
qxz2012_的专栏
08-23 1409
display: flex; flex-direction: column; justify-content: center;
vue中div水平垂直居中与body
fivestar2009的博客
09-13 1720
vue中div水平垂直居中与body
小豚鼠排排坐。 小艺酱买了一排排格子的小房子nm，她想让k只小豚鼠每只小豚鼠都有自己的房子。 但是为了不浪费空间，她想要小房子的最外圈尽量每行每列都有一只小豚鼠居住。 小艺酱想知道自己有多少种方案安排小豚鼠。输入整数n,m,k。(1<=n,m<=20,0<=k<=nm)输出方案数，答案对1e9+7取模。C++
02-06
小艺酱可以使用组合数学的知识来解决这个问题。 我们可以将这个房子看成一个网格图，将每个小豚鼠看成一个点。为了让小房子的最外圈尽量每行每列都有一只小豚鼠居住，小艺酱可以将小豚鼠分成两类：边界小豚鼠和非边界小豚鼠。边界小豚鼠指的是位于房子边界的小豚鼠，非边界小豚鼠指的是位于房子内部的小豚鼠。设有x只边界小豚鼠和y只非边界小豚鼠。 由于小艺酱想要尽量让每行每列都有小豚鼠居住，所以每行每列都应该有一只小豚鼠。因此x应该等于n+m-2，即边界的行数加列数减2。同时，由于小豚鼠总数为k只，所以y=k-x。 现在小艺酱可以使用组合数学的知识来计算边界小豚鼠的排列方式数。由于边界小豚鼠的数量为x，边界的行数为n，边界的列数为m，所以边界小豚鼠的排列方式数为C(x,n) * C(x,m)。 最后，小艺酱可以将边界小豚鼠的排列方式数乘以非边界小豚鼠的排列方式数，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值