CSS:屏幕正中间有个元素A,元素A中有文字A,随着屏幕宽度的增加

news/2024/11/17 19:25:21/
  • 始终需要满足以下条件:
    • A元素垂直居中于屏幕***;
    • A元素距离屏幕左右边距各10px;
    • A元素里面的文字”A”的font-size:20px;水平垂直居中;
    • A元素的高度始终是A元素宽度的50%; (如果搞不定可以实现为A元素的高度固定为200px;)
    • 请用 html及css 实现

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Centered Element</title><style>body {margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 100vh;}.element {width: calc(100vw - 20px);height: calc((100vw - 20px) * 0.5);background-color: pink;display: flex;justify-content: center;align-items: center;}.element span {font-size: 20px;}</style>
</head><body><div class="container"><div class="element"><span>A</span></div></div>
</body></html>


http://www.ppmy.cn/news/1094299.html

相关文章

浅谈数据治理中的智能数据目录

在数字化转型的战略实施中&#xff0c;很多企业都在搭建自己的业务、数据及人工智能的中台。在同这些企业合作和交流中&#xff0c;越来越体会到数据目录是中台建设的核心和基础。为了更好地提供数据服务&#xff0c;发挥数据价值&#xff0c;用户需要先理解数据和信任数据。 企…

【数据结构】 七大排序详解(壹)——直接插入排序、希尔排序、选择排序、堆排序

文章目录 &#x1f340;排序的概念及引用&#x1f431;‍&#x1f464;排序的概念&#x1f431;‍&#x1f453;排序运用&#x1f431;‍&#x1f409;常见的排序算法 &#x1f334;插入排序&#x1f38b;基本思想&#xff1a;&#x1f6eb;直接插入排序&#x1f4cc;算法步骤&…

【C刷题训练营】第三讲(c语言入门训练)

前言: 大家好&#xff0c;我决定日后逐渐更新c刷题训练营的内容&#xff0c;或许能帮到入门c语言的初学者&#xff0c;如果文章有错误&#xff0c;非常欢迎你的指正&#xff01; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&…

CyclicBarrier和CountDownLatch

CyclicBarrier: 用于协调多个线程同步执行的操作场合,所有线程等待完成,然后一起执行 使用方式: CyclicBarrier barrier = new CyclicBarrier(3); 定义初始数量,线程数必须达到才能执行 代码示例: public static void main(String[] args) {CyclicBarrier barrier = new…

使用Spring来管理对象关系映射(ORM)

简介 对象关系映射&#xff08;Object-Relational Mapping&#xff0c;简称ORM&#xff09;是一种技术&#xff0c;用于在面向对象程序和关系型数据库之间进行数据的映射。Spring框架提供了强大的支持来简化和优化ORM开发过程。本文将介绍如何使用Spring来管理对象关系映射。 …

Redis监控工具_RedisLive

Redis监控工具_RedisLive Redis安装请看: MacBook安装Redis redis集群搭建_亲自操作 RedisLive安装 RedisLive是由python编写的并且开源的图形化监控工具&#xff0c;非常轻量级&#xff0c;核心服务部分只包含一个web服务和一个基于redis自带的info命令以及monitor命令的…

linux文件管理命令

文章目录 先说有用的知识点tree pwd mkdir touch history clear 命令treewhichpwdmkdirtouchhistoryclear 文件类型文件管理命令cdechomv 移动文件cp 复制文件rm 删除文件cat 查看命令head 查看文件的前n行 默认为10tail尾部grep过滤关键字less --分页显示more --分页显示文件内…

Java 和 PHP GC 的差异和差异出现的原因

JAVA 的 GC 处理 判断草死掉的两种方式&#xff1a;引用计数和可达性分析 可达性分析对 JAVA 比较好用的原因是 JAVA遵守这面向对象的严格要求&#xff0c;每个变量都被对象包裹&#xff0c;所以每个变量都能通过对象来进行遍历找到&#xff0c;最终判断他们的是否被引用&…