资讯专栏INFORMATION COLUMN

那是我在夕阳下的code

ixlei / 301人阅读

摘要:但是这种技术太老了而且只适合端,移动端的不适合用这套其实移动端的不难,用布局。上面也是可以实现上下左右居中,而且布局不仅仅这有这样,它相当牛上面的核心代码标签展现成让子标签水居中让子标签垂直居中

布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为0,左右为auto;如下:

.child{width:10px;margin:0 auto;}//子标签

它就可以左右居中了。上下的话,就是让父标签展现成表格,子标签展现成单元格并把vertical-align属性设置成middle就可以了;

.father{display:table}
.child{display:table-cell;vertical-align: middle;}

它就可以了上下也居了。
但是...这种技术太老了!而且只适合pc端,移动端的不适合用这套...
其实移动端的不难,用flex布局。这布局也不难,不是特别高端的技术,所以应该把它学起来!不说了直接上代码。

.father{background-color: red;width: 120px;height: 110px;display: flex;justify-content:center;align-items:center;}
.child{background-color: blue;width: 20px;height: 10px;}

上面也是可以实现上下左右居中,而且flex布局不仅仅这有这样,它相当牛!
上面的核心代码:
display: flex;//标签展现成flex
justify-content:center;//让子标签水居中
align-items:center;//让子标签垂直居中

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50906.html

相关文章

  • 那是我在夕阳下的奔跑:边跑边学习html5之audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    gself 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5之audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    flybywind 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5之audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    LiuZh 评论0 收藏0
  • 夕阳下, 那是我在奔跑——单件模式

    摘要:急切的創建對象饿汉式以上爲饿汉式單列設計,該設計是線程安全的,即不同的線程在調用時返回的是統一對象,在加載這個類時,馬上創建了這個類的唯一單列實列。 單件模式(JAVA實現) 定義 單件模式: 確保一個類只有一個實列, 並提供一個全局訪問點 單件模式和全局變量的區別 若將對象賦值給一個全局變量, 則該對象需在程序開始時就創建好, 而改對象可能不會使用, 造成資源浪費, 而單件模式支持...

    lieeps 评论0 收藏0

发表评论

0条评论

ixlei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<