Html CSS 布局,位置处理 居中 对齐

Html CSS 布局,位置处理

1、居中布局

1、div 让内部div居中对齐

  • html
<div class="container"><div class="item">I am centered!</div>
</div>
  • style
      .container {border: 2px solid rgb(75, 70, 74);border-radius: .5em;height: 200px;display: flex;align-items: center;   /*调整y方向的位置 start 顶端对齐,center居中,end底端对齐*/justify-content: center;  /*调整x方向位置  left 左对齐  center居中   right右对齐*/}.item {border: 2px solid rgb(95, 97, 110);border-radius: .5em;padding: 20px;width: 10em;text-align: center;}

div全局居中对齐

  • html
  <div class="box"></div>
  • style
.box{width:100px;height:100px;background-color: cyan;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}

使用盒子模式让内部div居中

display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;

使用绝对定位让div居中

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

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

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

相关文章

基于Spring Boot的校园管理系统

目录 前言 功能设计 系统实现 获取源码 博主主页&#xff1a;百成Java 往期系列&#xff1a;Spring Boot、SSM、JavaWeb、python、小程序 前言 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自…

GPT与大模型行业落地实践探索

简介 本课程探讨GPT和大模型技术在行业中的实际应用和发展。课程将涵盖GPT的基础知识、原理、及其在行业中的应用案例&#xff0c;如财报分析和客服机器人。重点在于结合实际案例中的使用效果&#xff0c;讲解如何利用GPT的API开发企业级应用以及利用更高级的功能构造AI Agent。…

iOS 提取图片的主题色,并支持灵活提取

遇到一个需求&#xff0c;要提取图片中的色调&#xff0c;但还有一点特殊的需求&#xff0c;就是不是提取颜色最多的色调&#xff0c;也不是平均的色调&#xff0c;是图片中偏暗的色调 这就需要我们动态的调整我们提取的算法&#xff0c; 下面就看代码 dispatch_async(dispatch…

Prompt技巧总结和示例分享

"Prompt"&#xff08;提示&#xff09;在人工智能中通常指的是输入给模型的文本&#xff0c;用于引导模型生成预期的输出。在使用人工智能助手时&#xff0c;有效的提示技巧可以帮助你获得更准确和有用的回答。 以下是一些单轮对话提示时的技巧&#xff1a; 明确具体…

C++ 机器人相关面试点

C 机器人相关面试点 多功能聊天乐园 1. 功能实现&#xff1a; 用户管理&#xff1a;实现了用户注册与登录、头像上传与下载功能&#xff0c;用户密码通过OpenSSL加密&#xff0c;用户数据存储在MySQL数据库中&#xff0c;并通过XML文件进行本地持久化配置。 音乐播放与下载&a…

中国移动手撕代码 - 二叉搜索树删除节点

题目描述 已知二叉搜索树,数据不重复,提供 root 和 value, 遍历查找二叉树节点相等的值并删除,删除后剩余节点任然是二叉搜索树 Java 代码 class TreeNode {int val;TreeNode left;TreeNode right;TreeNode(int val)

react-native-Windows配置

一&#xff1a;官网&#xff1a; React Native for Windows macOS Build native Windows & macOS apps with Javascript and React 二&#xff1a;安装依赖 需要以管理员身份运行powershell,然后粘贴下面代码&#xff0c;注意&#xff1a;要安装淘宝镜像&#xff0c;要…

图解C#高级教程(一):委托

什么是委托 可以认为委托是持有一个或多个方法的对象。但它与对象不同&#xff0c;因为委托可以被执行。当执行委托时&#xff0c;委托会执行它所“持有”的方法。先看一个完整的使用示例。 // See https://aka.ms/new-console-template for more informationdelegate void M…

Skywalking告警配置

背景 skywalking 9.7.0&#xff0c;地址&#xff1a;Backend setup | Apache SkyWalking helm&#xff1a;skywalking-helm:4.5.0&#xff0c;地址&#xff1a;skywalking-helm/chart/skywalking/values.yaml at v4.5.0 首先来说一下为什么使用skywalking告警&#xff1f; …

创客匠人第二期“老蒋面对面”交流会圆满收官!

磅礴的大雨浇不灭奋斗的激情。9月24日&#xff0c;创客匠人第二期老蒋面对面—“创客匠人让知识变现不走弯路”内部大会在集美隆重举行。 本次内部大会旨在传递公司战略精神&#xff0c;深度探讨公司品牌传播的价值、方向和策略。这不仅是一次内部的交流与分享&#xff0c;更是…

[Day 79] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈在遊戲產業中的應用 區塊鏈技術已經開始在遊戲產業中引發革命&#xff0c;這項技術的分散化、透明性和安全性為遊戲世界帶來了許多創新應用。從虛擬物品的擁有權到去中心化市場、NFT遊戲資產交易&#xff0c;以及遊戲內經濟系統的構建&#xff0c;區塊鏈提供了強大的工具…

Spark 性能优化高频面试题及答案

目录 高频面试题及答案1. 如何通过调整内存管理来优化 Spark 性能?2. 如何通过数据持久化优化性能?3. 如何通过减少数据倾斜(Data Skew)问题来优化性能?4. 如何通过优化 Shuffle 操作提升性能?5. 如何通过广播变量(Broadcast Variables)优化性能?6. 如何通过序列化机制…

确保从IP池提取的IP是可用的对于数据抓取或其他网络活动至关重要。以下是一些确保IP可用性的有效方法:

1. IP验证 Ping测试&#xff1a;使用Ping命令来检查IP地址的响应情况。可用的IP地址应该能够成功响应Ping请求。 端口扫描&#xff1a;使用工具&#xff08;如Nmap&#xff09;扫描IP地址上的特定端口&#xff0c;以确认目标服务是否正常运行。例如&#xff0c;HTTP端口&#…

linux 内核代码学习(十)--Linux内核启动和文件系统

前面第九章介绍了linux内核文件系统从软盘启动的几种方式&#xff1a;1、从软盘直接启动的linux&#xff0c;软盘上包括内核及简单文件系统&#xff1b;2、从软盘直接启动的linux&#xff0c;将内核与文件系统分别放置在一张软盘上&#xff1b;3、Grub做为引导程序&#xff0c;…

银行管理系统

摘 要 伴随着信息技术与互联网技术的不断发展&#xff0c;人们进到了一个新的信息化时代&#xff0c;传统管理技术性没法高效率、容易地管理信息内容。为了实现时代的发展必须&#xff0c;提升管理高效率&#xff0c;各种各样管理管理体系应时而生&#xff0c;各个领域陆续进到…

了解针对基座大语言模型(类似 ChatGPT 的架构,Decoder-only)的重头预训练和微调训练

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着自然语言处理&#xff08;NLP&#xff09;技术的飞速进步&#xff0c;基于 Transformer 架构的大语言模型在众多任务中取得了显著成就。特别是 Decoder-only 架构&#xff0c;如 GPT 系列模型&…

【UI】Vue3 + Naive-ui 使用表格Data Table 以及分页页码显示不全问题解决

参考文章&#xff1a; Vue3 Naive-ui Data Table 分页页码显示不全 Naive UI之数据表格分页pagination 数据列表分页全部代码: <n-data-tableref"tableRef"striped:columns"columns":pagination"pagination":bordered"false":d…

JSON字符串转换成Java集合对象

在Java中&#xff0c;将JSON字符串转换成Java集合对象通常涉及到使用JSON处理库&#xff0c;如Jackson或Google的Gson。以下是使用这两个库的示例&#xff1a; 使用Jackson 添加Jackson依赖&#xff1a;如果你使用Maven&#xff0c;可以在pom.xml文件中添加以下依赖&#xff1…

Java必修课——Spring框架

目录 一、Spring框架概述二、IOC概念和原理2.1、什么是IOC2.2、IOC接口 三、深入理解Java基础中的集合框架3.1、Collection3.2、Map3.3、集合工具类 四、练习写一个SpringMVC框架1、介绍2、程序实践3、总结 五、Java开发者必备10大数据工具和框架 一、Spring框架概述 Spring是…

Javase学习day1-前置知识

1、什么是计算机 2、 硬件及冯诺依曼结构 3、软件及软件开发 4、常用的快捷键 5、常用的Dos命令 常用的Dos命令&#xff1a;(基本都是在cmd里面写的) #盘符切换&#xff1a;直接输入那个盘符的名字加一个冒号就行。 #切换目录&#xff1a; cd change directory&#xff08;这是…