css常见居中方法总结

news2024/11/19 15:15:46

最近跟着网上的教程做了几个网页项目,做的过程中关于居中涉及到了好几种方法,遂想将其总结归纳下来,一是理清自己的思路,二是希望能分享给需要帮助的小伙伴们。

话不多数,直奔主题。

本次涉及到的居中方法有七种,均为平时会常用到的。

目录

1.text-align:center 用于水平对齐

2.使用line-height属性来调整文本行高来实现居中

 3.vertical-align设置垂直对齐

4.background-position来设置水平/垂直方向位置

5 修改Padding值来使Content居中

6.margin :0 auto;

7.定位之绝对定位position:absloute


1.text-align:center 用于水平对齐

此方法浮动不可用

所适用的元素:

1.文本

2.span,a标签

3.input,img标签

注意:如果需要让以上元素水平居中,text-align需要给以上元素的父元素设置(行内元素给父元素设置)

text-align属性的其他取值:

7f091afb33e848789a2a56bfe05b22ec.png

2.使用line-height属性来调整文本行高来实现居中

行高示意图:

c86f8640cdae4f7b8e309ae66739bd74.png

line-height属性取值:

1.数字+px

2.倍数(当前标签font-size的倍数)

具体实现:

1.让单行文本垂直居中时可以设置line-height:文字父元素高度

2.网页精准布局时,会设置line-height:1;来取消上下间距

 3.vertical-align设置垂直对齐

vertical-align的适用元素和text-align一样

 vertical-align的属性取值:

b2402fa45fa1473ea6191c2ebad4d4bb.png

4.background-position来设置水平/垂直方向位置

常用来设置精灵图,背景图以及一些小图标的位置

属性取值:

一.方向名词: 1.水平方向:left,center, right

                        2.垂直方向:top,  center,bottom

二.数字+px(坐标):举例 background-position: 13px -110px;第一个是x坐标,第二个是y坐标.

5 修改Padding值来使Content居中

6.margin :0 auto;

这种方法最常见,常用来使版心居中

第一个属性的值控制上下,第二个属性的值控制左右。auto表示居中

浮动不可用

7.定位之绝对定位position:absloute

margin :0 auto;不可用

绝对定位可以通过设置偏移量属性来实现居中

 aeb18e5e78e2424b9c13d6fb0c0520f2.png

偏移量属性除了设置 数字+px这种取值外,还可以将属性设置为百分比:

例:div{

                position:absoluate;

                left:40%;  /*从左开始,移动到父block宽度的40%的位置,right,top,bottom同理*/

        }

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

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

相关文章

微信小程序嵌入 H5 页面(web-view)

在开发微信小程序的时候,我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况;微信小程序自带的 web-view 组件相当于 HTML 页面中的 iframe ,方便我们在微信小程序中打开一个 H5 页面; 官网描述: 承载网页的容器&a…

微前端(无界)

前言:微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本…

vue项目中引入Luckysheet

Luckysheet 介绍 Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。 实现功能 格式设置 样式 (修改字体样式,字号,颜色或者其他通用的样式)条件格式 (突出显示所关注的单元格或单元格区域&#xff1…

微信小程序(5)——如何制作好看的表格

✅ 因为 “表格” 在日常统计中无处不在,所以今天来做一做。但是微信小程序不支持 table 标签,我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。 文章目录一、从“html的table”到 “微信小程序的table”二、统一格式的表格三、非统一格式的表格…

【vuex】unknown action type:home/categoryList报错

记录一下今天遇到的bug。在做项目时,想进行vuex模块化开发。 在src/store下暂且建了两个小仓库home和search src/store/index.js import {createStore} from vuex; // 引入小仓库 import home from /store/home/index import search from /store/search/index// 对…

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

目录 一、问题描述: 二、原因 三、解决方案 一、问题描述: 学习vue3.0( Vue.js - 渐进式 JavaScript 框架 | Vue.js)的时候一直使用的家里电脑,项目搭建运行一直没问题,公司近期用vue3.0写项目 npm init…

(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

仿钉钉流程设计器前后端源码 2022年10月17日,重磅开源! 话不多说上码云项目链接,各位觉得有帮助可以点一个star 本项目是基于这个Flowable6.7.2实现的, 后面会开一个Activiti567的分支 本项目在码云地址: Flowable-Activiti仿钉钉流程设计器前后台源码--工作流中台项目-基于…

第一次尝试制作一个钓鱼网站,小白教程,超细!

**声明:小白一枚,写下来为了记录和学习交流,大神不喜勿喷。 **大体思路:仿页面,社工诱导用户填写信息,提交传入后端,后端获取信息并存储,传回“服务器繁忙”或虚假信息并重定向到真…

js 各种时间格式的转换

js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24:45 GMT0800(中国标准时间)部分可读字符串Fri Mar 18 2022格林威治时间Fri,18 Mar 2022 06:24:45 GMT现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMTIOS标准时间(JSON时间格式)…

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…

Vue|计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1:在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装,效果如下图 如果用传统的方式来实现的话,需要…

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取)h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你转换节点,如果需要转换成节点…

background-size 之 背景图的尺寸设置

目录 一:background-size参数取值 1.0 1.1 二:实例分析 2.1 参数分析 2.2 代码实例分析 引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度和高度都是auto默认值 可以用px设置成具体的值,也可以使…

二、pytest+selenium+allure实现web ui自动化

上一章: 一、web ui自动化环境搭建 pytestallureselenium_傲娇的喵酱的博客-CSDN博客_pytestseleniumallure pytest二次开发相关文章: pytest框架二次开发之自定义注解_傲娇的喵酱的博客-CSDN博客 pytest框架二次开发之机器人报警_傲娇的喵酱的博客-…

前端面试:浅拷贝和深拷贝的区别?

前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转 那么大家晚上好,我是今天晚上的主讲老师,我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里…

百度低代码框架amis介绍及实例讲解

目录引言为什么用amis?官网这么说的amis不适合做什么?amis框架集成配置与组件概念实例:通过一个CRUD组件实现增删改查列表列表查询查看详情自定义操作按钮提交表单引言 目前低代码概念已经无人不知,随着新冠病毒的爆发&#xff0…

修改elementUI样式未生效问题(挂载到了body标签上)

修改挂载到body标签上elementUI样式问题 目录修改挂载到body标签上elementUI样式问题前言一、适用范围二、示例1.目标2.实现思路修改自带样式方法最后看效果总结前言 在使用element-ui库的时候,有时会需要修改它自带的css样式,组件模块化化编程时一般会…

【Vue3中的响应式原理】

Vue3响应式原理 在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题。但是在Vue3中,这些问题都得以解决。 Vue2中的响应式原理 首先我们先看一下Vue2中的响应式原理,其次…

vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据

项目场景: 需要VantUI实现的功能 问题描述 vant中的picker选择器,只能用这种数组,来展示数据 columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’], 往往我们的请求数据,都是这样的。对…