浅谈编译代码时用的居中方法

时间:2022-01-15 来源:未知网络 作者:996建站网

在平时编译时会用到很多属性,本文具体的来说一下居中时候常用的方法。

使用display:flex;也能实现居中效果;

采用flex布局的元素,成为flex容器,他的所有子元素自动成为容器成员,成为容器项目;

容器默认存在2根轴:水平的主轴和垂直的交叉轴

其中主轴的对齐方式有(justify-content):

flex-end 右对齐

Center 居中

Space-between 两端对齐,项目之间的间隔都相等

Space-around 每个项目两侧的间隔相等

交叉轴的对齐方式有(align-items):

flex-end 下对齐

center 居中

baseline 元素位于容器基线上

实现居中效果:display:flex;

justify-content:center;

align:items:center;

在空白处加行css,让这个div在页面居中(上下左右都居中)

<div style="border:1px solid red;width:200px;height:200px;

__________________________________________”>Hello 爱投资!!</div>

第一次看到这个问题的时候

我觉得这个问题出的有问题

你都没给我父布局大小,让我怎么让它居中,

老师讲完以后,还是懵了很久,

直到有一天问了”大神”

大神给了我答案并详细给我讲解为什么这样写就能让div居中

即使没给父布局大小

代码及解析:

Position:flex;

首先为div设置定位属性,属性值为flex。

个人理解为,因为这个div一直居中,其位置是固定的。所以用了flex

Left:50%;

Top:50%;

然后为div设置定位以后的位置属性:left:50%设置该div距离左边有其父布局有50%的距离;top:50%设置该div距离上边有其父布局有50%的距离。

Margin-left:-100px;

Margin-top:-100px;

Margin-left:-100px;该div的width为200px,为其设置margin-left:-100px;以后

该div左半部分在其父布局50%的区域

右半部分在其父布局右半部分显示

浅谈编译代码时用的居中方法插图

如图所示,该div就在其父布局上下,左右居中。

对于居中,因其出现的地方很多,我有很多不同的见解,就仅仅一个居中,但是却拥有很多的用途;text-align,vertical-align诸如等等都能够让某一元素拥有居中的效果。

我想对vertical-align说一些自己的看法;vertical-align需要在行内块元素的前提下才能够有作用,也就是需要给元素定义dispaly:inline-block;并且也是直接给元素本身而不是定义在其父元素上。

<style>
.box{width:100px;
height:100px;
border:1px solid #000;
}
.box p{display:inline-block;}
.box b{display:inline-block;}
</style>

<div class=”box”>
<p>法是否符合规划</p>
<b>丹江口单方事故</b>
</div>

只有对两个行内块元素定义了vertical-align之后vertical-align才能出现效果。

浅谈编译代码时用的居中方法插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序