居中面试问题

前端常问居中面试问题

css文本居中

文本水平居中

<div class="father"><div class="child"><div>
<div>

子类元素为行内元素,则给父类元素定义text-align:center

如果子元素是块元素,则给子元素定义margin:0 auto;

如果子元素是块级元素,可以通过display将子元素定义成行内元素,在给子元素定义text-align:center

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;}.child {display: block;text-align: center;background-color: orange;}</style>
</head>
<body><div class="father"><span class="child">我是一棵小小小小草奥</span></div>
</body>
</html>

在这里插入图片描述

如果margin:0 auto;加在父元素上,则父元素相对与body水平居中。text-align是作用于自身

文本垂直居中

<div>hello word </div>

例如这个高为100px,让文本居中你需要两个条件

div {vertical-align:middledisplay:table-cell;
}

这里display必须是table-cell

是table-cell会控制这个盒子的宽度为里面text的宽度,并不是真正可以设置宽高

另一种方法是,对单行文本的垂直居中可以将行高line-height设置为盒子的高度

给盒子做居中

盒子水平居中

margin:auto

盒子垂直居中,不能用margin,可以用定位或者flex布局实现或者浮动

用定位实现常见的父子盒子都是块元素的情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;}.child {width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;//父元素开启相对定位}.child {width: 200px;height: 200px;top: 0;left: 0;right: 0;bottom: 0;margin: auto; //居中关键就是外边距为autoposition: absolute; //子元素开启固定定位background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>

方式不一样但是呈现的样式是一样的

在这里插入图片描述

弹性盒子居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;display: flex; //这里必须要开启弹性盒子justify-content: center; //水平居中align-items: center;//垂直居中background-color: skyblue;}.child {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

美易官方《盘前:道指期货涨0.1% 美国12月CPI即将揭晓》

盘前&#xff1a;道指期货涨0.1% 美国12月CPI即将揭晓 随着市场对美国12月CPI数据的期待升温&#xff0c;道指期货在盘前微幅上涨0.1%。市场普遍预期该数据将显示通胀压力温和&#xff0c;这可能为美联储在接下来的货币政策会议上提供更多灵活性。在此背景下&#xff0c;投资者…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux系统编程第十天-Linux下mplayer音乐播放器练习题(物联技术666)

更多配套资料CSDN地址:点赞+关注,功德无量。更多配套资料,欢迎私信。 物联技术666_嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记-CSDN博客物联技术666擅长嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记,等方面的知识,物联技术666关注机器学习,arm开发,物联网,嵌入式硬件,单片机…

内存溢出原因和解决办法

内存泄漏&#xff1a; 原因&#xff1a; 内存泄漏是由于程序中存在未正确释放内存的情况&#xff0c;导致内存不断累积&#xff0c;最终导致内存溢出。 解决方法&#xff1a; 使用内存泄漏检测工具&#xff08;如valgrind&#xff09;来检测和修复代码中的内存泄漏问题。 …

抖音百科怎么创建?头条百科的规则和技巧

在玩抖音的时候&#xff0c;不知道注意到抖音的搜索结果没有&#xff0c;有时候会去搜索框搜索一个品牌或人物名称&#xff0c;搜索框下面翻几下大概率就会出现百科词条&#xff0c;这个词条就是抖音百科。抖音的百科属于头条百科&#xff0c;因为这两个平台都属于字节跳动旗下…

钉钉逐浪AI Agent

文&#xff5c;郝 鑫 编&#xff5c;刘雨琦 “大公司代表落后生产力&#xff0c;是慢半拍的”&#xff0c;“小创新靠大厂&#xff0c;大创新仍然要靠小厂”&#xff0c;这是以李彦宏和王小川为代表的创业老炮&#xff0c;在2023年总结出来的创新规律&#xff0c;从移动互…

Pinsker’s inequality 与 Kullback-Leibler (KL) divergence / KL散度

文章目录 Pinsker’s inequalityKullback-Leibler (KL) divergenceKL散度在matlab中的计算 KL散度在隐蔽通信概率推导中的应用 Pinsker’s inequality Pinsker’s Inequality是信息论中的一个不等式&#xff0c;通常用于量化两个概率分布之间的差异。这个不等式是由苏联数学家…

批量查询顺丰快递信息:固乔快递查询助手的实用指南

随着电商和物流行业的飞速发展&#xff0c;对于物流信息的查询需求也日益增长。固乔快递查询助手是一款高效、便捷的软件&#xff0c;能够帮助用户批量查询顺丰快递信息&#xff0c;大大提高了物流信息的管理和查询效率。 一、下载安装 首先&#xff0c;用户需要从固乔科技网站…

【C】extern 关键字

目录 extern1&#xff09;基本概念2&#xff09;用法1&#xff1a;声明全局变量3&#xff09;用法2&#xff1a;声明函数4&#xff09;用法3&#xff1a;在头文件中使用 extern extern 1&#xff09;基本概念 extern 是C语言的一个关键字。 extern 用于声明在其他源文件中定…

统计学-R语言-2.1

文章目录 前言安装过程总结 前言 上篇文章介绍了统计学-R语言的介绍&#xff0c;本篇文章介绍如何安装R软件。 安装过程 可以登录官网&#xff0c;https://www.r-project.org/&#xff0c;点击此处跳转。 点进去下滑找到China,之后找任意一个链接地址进行下载即可。 我点的是…

【Harmony OS - 消息通知】

应用可以通过接口发送通知消息&#xff0c;提醒用户关注应用中的变化。用户可以在通知栏查看和操作通知内容&#xff0c;通常用于当应用处于后台时&#xff0c;发送&#xff0c;本文主要来介绍在Harmony OS中的三种消息通知。 基础通知 总体流程有三步&#xff1a; 导入noti…

确定了!软考中级「集成」、「监理」新版教程有哪些变化?

新版教程改了哪些内容&#xff1f;2024上半年软考应该如何备考&#xff1f; 准备考24年上集成的朋友们&#xff0c;先不要慌&#xff01;备考脚步不要乱&#xff0c;改版可能还是好事呢&#xff0c;难度可能会降点&#xff1f; 2024年教程改版科目&#xff1a; ✔软考中级-集…

ARM汇编指令

数据和指令类型 ARM采用的是32位架构 ARM约定: Byte&#xff1a;8 bits Halfword&#xff1a;16 bits (2 byte) Word&#xff1a;32 bits (4 byte) Doubleword&#xff1a;64-bits&#xff08;8byte&#xff09; &#xff08;Cortex-A处理器&#xff09; 大部分ARM core …

优化改进YOLOv5算法之Deformable Attention,效果秒杀CBAM和CA等

目录 1 Deformable Attention模块原理 2 YOLOv5中加入Deformable Attention模块 2.1 common.py文件配置 2.2 yolo.py配置

由于找不到msvcp140.dll无法继续执行代码原因及解决教程分享

在计算机打开软件过程&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“由于找不到msvcp140.dll无法继续执行代码”。这个错误通常发生在使用Microsoft Visual C 2015或更高版本编译的程序运行时。那么&#xff0c;什么是msvcp140.dll文件&#xff1f;为什么会…

59.螺旋矩阵II

class Solution { public:vector<vector<int>> generateMatrix(int n) {//二维数组初始化 // int dis[4][4]{{-1,0},{1,0},{0,-1},{0,1}};int dis[4][4]{{0,1},{1,0},{0,-1},{-1,0}};//右下左上 0,1,2,3//cout<< dis[0][0]<<" "<<dis…

定制耐酸碱移液吸头PFA移液枪头可重复使用

移液枪是移液器的一种&#xff0c;常用于实验室少量或微量液体的移取&#xff0c;规格不同&#xff0c;不同规格的移液枪配套使用不同大小的枪头&#xff0c;不同生产厂家生产的形状也略有不同&#xff0c;但工作原理及操作方法基本一致。移液枪属精密仪器&#xff0c;使用及存…

C++函数(3)

纯粹素数 题目描述&#xff1a;纯粹素数是这样定义的&#xff1a;一个素数&#xff0c;去掉最高位&#xff0c;剩下的数仍为素数&#xff0c;再去掉剩下的数的最高位&#xff0c;余下的数还是素数。这样下去一直到最后剩下的个位数也还是素数。求出所有小于3000的四位的纯粹素…

电脑可以连接网络但浏览器无法访问部分或全部网页

啾咪&#xff01;离大谱了&#xff0c;电脑一段时间没有用&#xff0c;最近打开却发现可以连接网络但是无法访问部分网页&#xff08;如CSDN&#xff09;&#xff0c;显示如下&#xff1a; 有三种解决方法&#xff1a; &#xff08;1&#xff09;清除DNS缓存 步骤&#xff1a;…

离散数学3

补变元 解释&#xff1a;它是以反^作为一组一组的&#xff0c;因此&#xff0c;对于P反^Q来说&#xff0c;P是一组&#xff0c;Q是一组&#xff0c;又有以下&#xff1a;对缺少变元的项要补齐&#xff0c;P缺少Q&#xff0c;Q缺少P。因此&#xff0c;补齐。 用分配律展开 解释&…

useEffect监听多个变量

useEffect监听了多个变量怎么办&#xff1f; 前言 如何监听多个变量&#xff1f;在React开发中经常会遇到的问题。随着应用复杂性的增加&#xff0c;组件中可能涉及多个状态的变化&#xff0c;根据这种变化可以做相应的业务&#xff0c;这时候监听就变得很有必要了。 常见的…