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

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

使用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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,618评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,513评论 0 6
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,528评论 5 15
  • 说一件对于我来说即无奈又好笑的事,很多人都会遇到。经常有好友发微信过来,让给朋友圈点赞。打开朋友圈不是点赞领美食券...
    猪十戒_ef1c阅读 248评论 0 0