美文网首页
浅谈编译代码时用的居中方法

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

作者: 千锋H5 | 来源:发表于2018-07-31 14:27 被阅读3次

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

使用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在页面居中(上下左右都居中)

__________________________________________”>Hello 爱投资!!

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

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

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

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

直到有一天问了”大神”

大神给了我答案并详细给我讲解为什么这样写就能让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;并且也是直接给元素本身而不是定义在其父元素上。

.box{width:100px;

height:100px;

border:1px solid #000;

}

.box p{display:inline-block;}

.box b{display:inline-block;}

法是否符合规划

丹江口单方事故

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

编辑:千锋HTML5

相关文章

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

    在平时编译时会用到很多属性,本文具体的来说一下居中时候常用的方法。 使用display:flex;也能实现居中效果...

  • CSS实现居中样式

    水平居中 行内元素水平居中 方法:用text-align:center实现 html代码部分 css代码部分 块元...

  • Css让div在屏幕上居中

    # 让div在屏幕上居中(水平居中+垂直居中)的方法总结 - html代码如下: - Css居中方法 (敲黑板)...

  • 浅谈编译过程

    浅谈编译过程浅谈编译过程

  • 8、方法的调用原理(1)

    1.编译后的方法调用 还是之前的Person类的源码: 要研究方法调用就绕不过编译后的代码,这里用clang编译一...

  • objc_msgSend流程分析

    objc_msgSend流程分析——快速方法查找 编译时(静态):将代码编译成机器能识别的代码的过程。主要是对代码...

  • #pragma GCC diagnostic 编译器警告

    方法弃用警告 中间代码是弃用代码只支持iOS7-iOS8,当前编译器会报黄色警告。当我们要支持不同版本时,为了去掉...

  • css-垂直居中

    - 居中vs不居中 代码 - 绝对定位实现居中 代码 高度,宽度不固定的话无法使用该方法,css3可在该需要居...

  • 2019-02-24

    下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: MAIN 12345 方法一:div...

  • day08

    A我今天学到了什么 垂直水平居中的3种方法 1.用transform垂直水平居中 2.用position水平居中 ...

网友评论

      本文标题:浅谈编译代码时用的居中方法

      本文链接:https://www.haomeiwen.com/subject/vxchvftx.html