HTML中经常用到的对齐,居中方式

Wesley13
• 阅读 533

在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!

居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。

1盒子居中 margin:auto; 通常在这此行只有一个盒子的情况下使用[需要定宽-常规流和浮动不用]

2文本居中 

   定义水平轴线对齐方式

flex-start 项目位于在主轴起点
flex-end 项目位于主轴终点
center 项目在中间
space-between 两端对齐,项目之间的间隔都相等(开头和最后与父元素没有间隔)
space-around 项目之间间隔相等,与父元素的边距是间隔的一半
space-evenly 项目与父元素的间距是一样的

    定义属性在交叉轴如何对齐 align-items

align-items:flex-start 交叉轴起点对齐
align-items:flex-end 交叉轴终点对齐
align-items:center 交叉轴中点对齐
align-items:baseline 项目第一行文字基线对齐
align-items:stretch 项目未设置高度或者设置为auto,将占满整个容器高度

    定义多根轴线对齐方式 align-content_多行的时候用_

align-content:flex-start 交叉轴起点对齐
align-content:flex-end 交叉轴终点对齐
align-content:center 交叉轴中点对齐
align-content:space-around 间距相等;轴之间的间距比边框间距大一倍
align-content:space-between 交叉轴两端对齐,轴间距平均分布

水平居中
定宽 margin:auto (常规流和弹性项目【不用定宽】)
弹性盒设置justify-content:center 让弹性项目在主轴上居中
父元素设置text-align:center 让内部行盒和块盒居中
相对定位元素 margin-left:50%; transform:translateX(-50%) margin是项目的宽度【终极】
垂直居中
单行文本垂直居中 line-height 为项目的高度
弹性盒 align-items:center 让项目在垂直轴居中
相对定位元素 top:50%;transform:translateY(-50%)【终极】
相对定位元素垂直居中
left:50%;top:50%;transform:translate(-50%,-50%)

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
2年前
css之元素居中
行内元素居中文本垂直居中单行文本垂直居中设置lineheight与盒子高度一样就行这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。多行文本垂直居中1.ve
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
CSS 小技巧
1、文字变模糊处理:{      cursor: none!important;  }p {      color: transparent;      textshadow: 111 0 0 5px;  }    2、DIV上下左右居中/ 上下居中 
Wesley13 Wesley13
1年前
LODOP打印项水平居中
LODOP控制打印项水平居中,可以用如下语句,该语句控制的是打印项本身在纸张中水平居中。LODOP.SET\_PRINT\_STYLEA(0,"Horient",2);这个根据大的打印项本身的宽度,如果打印项本身内部不是居中的,那么加了这句,内容也不会居中。之前有博文介绍过打印项在纸张中受到的各种边距:LODOOP中的各种边距打印项
Wesley13 Wesley13
1年前
Flex PopUpManager 弹出窗口居中
今天看到窗口居中弹出,我便想到了Alert,既然Alert每次都能居中弹出,为什么我们自定义的窗口不能居中弹出呢,所以,我查看了下Alert的show方法,放到我的代码中,果然也能居中弹出了,不论布局是如何设计的,下面是主要代码://自定义弹出的窗口大小vartitle:TitleWindownewTitleWindow();
Wesley13 Wesley13
1年前
LODOP打印图片水平居中
其他居中,查看本博客相关博文:LODOP中打印项水平居中简短问答(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fhuaxie%2Fp%2F11988181.html)、图片也属于超文本打印项,因此如果想把图片居中,也需要图片本身内容相对于图片打
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue