居中总结

最新推荐文章于 2023-12-03 15:22:54 发布
最新推荐文章于 2023-12-03 15:22:54 发布
阅读量103 收藏
点赞数
分类专栏： html-css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoka2/article/details/105599491
版权

居中总结

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素text-align:center

 <style>
        div {
            margin: 30px;
            background: lightblue;
            height: 100px;
            text-align: center;
        }
        .inline-block{
            display: inline-block;
            width: 300px;
            height: 50px;
            background: red;
        }
        img{
            height: 50px;
        }
    </style>
<body>
    <div>
        <a href="">超链接</a>
    </div>
    <div>
        <span class="inline-block"></span>
    </div>

    <div>
        <img src="1.jpg" alt="">
    </div>

    <div>
        <input type="text">
    </div>
</body>

常规流块盒水平居中

定宽，设置左右margin为auto

<style>
        .container{
            margin: 30px;
            height: 200px;
            background: lightblue;
        }
        p{
            width: 500px;
            height: 100px;
            background: red;
            margin: 0 auto;
        }
    </style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

<style>
        .container{
            margin: 30px;
            height: 200px;
            background: lightblue;
            position: relative;
        }
        p{
            width: 500px;
            height: 100px;
            background: red;
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
    </style>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

定位元素水平垂直居中

<style>
        .container{
            margin: 30px;
            height: 200px;
            background: lightblue;
            position: relative;
        }
        p{
            width: 500px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
        }
    </style>

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

h1{
            height: 200px;
            background: lightblue;
            text-align: center;
            line-height: 200px;
        }

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

<style>
        div{
            background: lightblue;
            /* display: inline-block; */
            padding: 100px 0;
        }
    </style>
<body>
    <div>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae cupiditate distinctio suscipit nihil sed incidunt, provident, laboriosam rem ad repellat excepturi officiis sapiente enim fuga similique quas, vero dolores quae!
    </div>
</body>

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto

<style>
        .container{
            margin: 30px;
            height: 200px;
            background: lightblue;
            position: relative;
        }
        p{
            width: 500px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
        }
    </style>
空杯lk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
块居中 总结块居中 总结块居中 总结
12-28
块居中 总结块居中 总结块居中 总结
CSS水平居中总结(新手必看篇)
09-24
下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html css 居中总结
星空&无痕 の 博客
02-16 420
在实际的项目开发中我们经常遇到需要居中的问题。包括水平方向和垂直方向。总结一下遇到的居中问题。1.元素块水平居中。 方法一：margin：0 auto<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>Document</title> <style> body { ba
CSS居中总结-学习笔记
guishifoxin的博客
07-18 167
一、水平居中 (1) 行内元素 .parent{ display:block; text-align:center; } (2) 单个块状元素 .item{ margin:0 auto; } 优点：实现方法简单易懂，浏览器兼容性强 缺点：扩展性差，无法自适应未知项情况 (3) 多个块状元素 1、使用inline-block .parent{ disp...
居中总结（上）
Growing_wild的博客
04-21 140
居中总结块级元素居中浮动后居中 块级元素居中 块级设置宽度，margin：0 auto; 计算margin值,计算margin-top,left,right,bottom 外层宽度撑满屏幕，设置text-align:center;内层设置display:inline-block;ul {position: absolute;left: 0;right: 0;bottom:-30px;text-a...
CSS居中总结
qq513036862的博客
11-10 228
大家请看这个，详细，透彻。https://css-tricks.com/centering-css-complete-guide/
各种居中问题总结
mr_fzz的博客
11-01 529
水平居中 1.宽度确定的块状元素水平居中: margin:0 auto; 2.不定宽块状元素水平居中: 设置父元素为: position:relative; float:left; left:50%; 设置子元素(想要居中的元素)为: position:relative; left:
css居中总结
共同学习，心怀感激。
08-17 169
css居中总结
11.29居中总结
2301_80293400的博客
12-03 430
一些居中的总结
元素及文本的水平居中/垂直居中/绝对居中总结
09-25
简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
实现水平垂直居中总结.html
06-28
关于元素的水平/垂直居中的方案有很多，包括知道元素宽/高和不知道元素宽/高的情况。该html文档总结了几个我知道的较为常用的实现方法。
keil5安装程序（包含keygen）
05-21
keil5安装程序（包含keygen）适用于单片机学习
grpcio-1.14.1-cp37-cp37m-manylinux1_i686.whl
最新发布
05-21
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
grpcio-1.14.0-cp36-cp36m-linux_armv7l.whl
05-21
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
CoreNLP一套Java核心自然语言处理工具，用于标记化、句子分词、NER分析、相互引用、情感分析等.zip
05-21
CoreNLP一套Java核心自然语言处理工具，用于标记化、句子分词、NER分析、相互引用、情感分析等
java+springboot图片处理Utils类文件
05-21
包含方法： 1、从图片的MultipartFile获取InputStream。 2、转换图片格式为jpg，保持原尺寸不变，并获取新的InputStream。 3、压缩图片文件大小,图片尺寸不变。 4、按照指定比例进行缩小和放大。 5、裁剪图片。 6、给某张图片绘制标记框，并输出至指定位置。 7、MultipartFile 转 File。
vscode-1.52.0.tar源码文件
05-21
vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件 vscode-1.52.0.tar源码文件vscode-1.52.0.tar源码文件
node-v10.14.1-headers.tar.xz
05-21
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
displayflex垂直居中
08-30
总结起来，要实现display: flex的垂直居中，可以在容器的样式中添加以下代码： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 这样容器内的元素就会在垂直和水平方向...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值