CSS 居中对齐 (水平居中 )

水平居中

1.文本居中对齐

内联元素(给容器添加样式) 

限制条件:仅用于内联元素 display:inline 和 display: inline-block;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;text-align: center;}.item {display: inline-block;width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- display: inline</span></div><div class="box"><div class="item">水平居中 -- display: inline-block</div></div></body>
</html>

 自动外边距(块级元素)

限制条件:仅用于块级元素 display:block;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;}.item {margin: auto;width: 300px;background: yellow;}</style></head><body><div class="box"><div class="item">水平居中 -- 块级元素 display:block</div></div></body>
</html>

 flex布局   

给容器添加样式 :display: flex; justify-content: center; (

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;display: flex;justify-content: center;}.item {width: 400px;background: yellow;}</style></head><body><div class="box"><span>水平居中 -- flex布局 display: inline</span></div><div class="box"><div class="item">水平居中 -- flex布局 display: block</div></div></body>
</html>

子绝父相 + transform (CSS3)


限制条件:浏览器需支持CSS3,比较老的浏览器不适用
给容器(父元素)添加样式

position: relative
给内部元素添加样式
position: absolute;
left: 50%;
transform: translate(-50%, 0);

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;transform: translate(-50%, 0);}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + transform</span></div></body>
</html>

 子绝父相 + 自动外边距 (指定宽度)

限制条件:内部元素需限定宽度

给容器(父元素)添加样式

position: relative


给内部元素添加样式

position: absolute; left: 0; right: 0; margin: auto;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 0;right: 0;margin: auto;width: 300px;}</style></head><body><div class="box"><span class="item">水平居中 -- 子绝父相 + 自动外边距</span></div></body>
</html>

子绝父相 + 负外边距 (知道宽度 + 宽度计算)不退推荐

限制条件:需知道内部元素的宽度(无法预知宽度的内联元素和未知宽度的块级元素都不适用)

给容器(父元素)添加样式

position: relative

给内部元素添加样式

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {width: 400px;background: yellow;position: absolute;left: 50%;margin-left: -200px;}</style></head><body><div class="box"><div class="item">水平居中 -- 绝对定位元素 position:absolute</div></div></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/735800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python单例模式应用之pymongo连接

文章目录 单例模式介绍模块简介安装简单的连接使用单例模式的连接单例类的实现配置的使用单例模式的测试 单例连接的调用 https://gitee.com/allen-huang/python 单例模式介绍 适用场景&#xff1a; 单例模式只允许创建一个对象&#xff0c;因此节省内存&#xff0c;加快对象访…

Gradient Boosting详解

Gradient Boosting是一种集成学习方法&#xff0c;通过迭代地训练弱分类器来构建一个强分类器。与AdaBoost类似&#xff0c;Gradient Boosting也关注之前轮次中被错误分类的样本&#xff0c;但是它的思想更加一般化&#xff0c;可以用于回归问题和分类问题。以下是Gradient Boo…

Linux之selinux详解

华子目录 概念作用selinux与传统的权限区别selinux工作原理名词解释主体&#xff08;subject&#xff09;目标&#xff08;object&#xff09;策略&#xff08;policy&#xff09;&#xff08;多个规则的集合&#xff09;安全上下文&#xff08;security context&#xff09; 文…

RabbitMQ - 04 - Fanout交换机 (广播)

目录 部署demo项目 什么是Fanout交换机 实现Fanout交换机 1.控制台 声明队列 声明交换机 将交换机与队列绑定 2.编写消费者方法 3.编写生产者测试方法 部署demo项目 通过消息队列demo项目进行练习 相关配置看此贴 http://t.csdnimg.cn/hPk2T 注意 生产者消费者的…

每日一练:LeeCode-35、搜索插入位置【数组】、面试题 01.08. 零矩阵【数组】、面试题 01.07. 旋转矩阵【数组+行列翻转】

搜索插入位置、零矩阵、旋转矩阵 每日一练&#xff1a;LeeCode-35、搜索插入位置【数组】方法一&#xff08;自己写的&#xff09;方法二二分法 每日一练&#xff1a;面试题 01.08. 零矩阵【数组】每日一练&#xff1a;面试题 01.07. 旋转矩阵【数组行列翻转】 每日一练&#x…

课时60:流程控制_if条件控制_if 案例实践

2.2.2 if 案例实践 学习目标 这一节&#xff0c;我们从 服务管理、堡垒机登录、小结 三个方面来学习。 服务管理 案例需求 要求脚本执行需要有参数&#xff0c;通过传入参数来实现不同的功能。参数和功能详情如下&#xff1a;参数 执行效果start 服务启动中...sto…

iperf流量分析

iperf3打流软件 本身不支持多线程打流&#xff0c;所以本身服务器软中断占用较高&#xff0c;无法突破打流瓶颈&#xff0c;而iperf2版本没有该问题&#xff0c;所以可以使用iperf2来进行打流&#xff0c;来呈现真实网络带宽。iperf3需要使用-P多线程 tcp传输带宽&#xff1a;…

【个人开发】llama2部署实践(三)——python部署llama服务(基于GPU加速)

1.python环境准备 注&#xff1a;llama-cpp-python安装一定要带上前面的参数安装&#xff0c;如果仅用pip install装&#xff0c;启动服务时并没将模型加载到GPU里面。 # CMAKE_ARGS"-DLLAMA_METALon" FORCE_CMAKE1 pip install llama-cpp-python CMAKE_ARGS"…

探寻程序员职业之迷:选择你的职业赛道

作为一名程序员&#xff0c;你站在职业发展的十字路口&#xff0c;眼前是一个庞大而复杂的迷宫&#xff0c;每条通道都通往不同的职业赛道。前端如花园般绚丽&#xff0c;后端似黑暗洞穴&#xff0c;数据科学则隐藏着神秘的密室。在这充满挑战和机遇的迷宫中&#xff0c;你准备…

解决eclipse上启动不了tomcat问题

一、问题&#xff1a;在eclipse上启动不了tomcat 网上搜的方法基本都不行&#xff0c;改Maven配置和重建项目等等都解决不了。问题如下 严重: 子容器启动失败 java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component …

【实验报告】C语言实现猜单词的小游戏

之前帮别人写的一个简单的报告&#xff0c;无偿分享给大家~代码在后面&#xff0c;有一些图片出于懒惰没有上传。比较简单&#xff0c;喜欢的话关注我~&#xff0c;请勿商用~ 1 系统功能模块结构图 该程序主要思路&#xff1a; 头文件设计&#xff0c;存储结构设计&#xff0…

Ubuntu启用ROOT用户和配置SSH远程

文章目录 Ubuntu启用ROOT用户和配置SSH远程一、前言1.简介2.环境 二、正文1.首次启用ROOT用户2.配置ROOT的SSH远程 Ubuntu启用ROOT用户和配置SSH远程 一、前言 1.简介 在Ubuntu系统中&#xff0c;默认情况下&#xff0c;root用户&#xff08;也就是超级用户或管理员用户&…

Biomedical knowledge graph-enhanced prompt generation for large language models

1. 生物医学知识图谱增强大语言模型提示生成 论文地址&#xff1a;[2311.17330] Biomedical knowledge graph-enhanced prompt generation for large language models (arxiv.org) 源码地址&#xff1a;https://github.com/BaranziniLab/KG_RAG 2. 摘要 大语言模型&#xff0…

IOS面试题object-c 71-80

71. 简单介绍下NSURLConnection类及 + sendSynchronousRequest:returningResponse:error:与– initWithRequest:delegate:两个方法的区别?NSURLConnection 主要用于网络访问,其中 + sendSynchronousRequest:returningResponse:error:是同步访问数据,即当前线程会阻塞,并等待…

UE4开个头-简易小汽车

跟着谌嘉诚学的小Demo&#xff0c;记录一下 主要涉及到小白人上下车和镜头切换操作 1、动态演示效果 2、静态展示图片 3、蓝图-上下车

机器人大赛有什么用?

机器人大赛在多个方面都具有显著的价值。首先&#xff0c;机器人大赛可以为学生提供一个实践与创新的机会&#xff0c;有助于培养学生的动手实践能力和创新思维。在比赛过程中&#xff0c;学生需要运用所学的知识和技能&#xff0c;设计、制作和调试机器人&#xff0c;这不仅可…

云原生技术实践:Kubernetes集群的部署与运维

随着云原生技术的兴起&#xff0c;Kubernetes作为容器编排领域的领导者&#xff0c;受到了越来越多开发者和运维人员的关注。本文将深入探讨Kubernetes集群的部署与运维实践&#xff0c;旨在为中高级技术人员提供有价值的参考和帮助。 一、引言 云原生技术作为现代软件开发的…

基于冠豪猪优化算法(Crested Porcupine Optimizer,CPO)的无人机三维路径规划(MATLAB)

一、无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径&#xff0c;使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一&#xff0c;它可以通过算法和模型来确定无人机的航迹&#xff0c;以避开障碍物、优化飞行…

在 .NET 项目中复制资源文件夹到生成目录

本文主要介绍在使用 Visual Studio 进行调试和发布时&#xff0c;如何在 .NET 项目中复制资源文件夹到生成目录。 1. 背景 在开发 .NET 项目的过程中&#xff0c;我们有时会遇到需要在 debug 、 release 或是发布时将资源文件夹复制到生成目录的需求。这些资源可能包括图片、配…

突破编程_C++_设计模式(观察者模式)

1 观察者模式的概念 观察者模式&#xff08;Observer Pattern&#xff09;是设计模式中的一种行为模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。当主题对象状态发生变化时&#xff0c;它的所有依赖者&#xff08;观察者…