h5居中loading_H5样式与布局 --常用居中方法

近日清闲，决定用博客来总结下入行一年多来零零散散记录在小本本上的知识点。

先看布局

1.常用居中方法

我们假设DOM文档结构如下，子元素要在父元素中居中：

啦啦啦

我要居中

水平居中

实现水平居中的前提是父元素有一个宽度，没有设置的话，默认为上一级的宽度。

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

1.行内元素&&不定宽块状元素：对父元素设置text-align:center;

2.定宽块状元素：设置左右margin值为auto; (自身有宽度margin才有效)

3.通用方案: flex布局，对父元素设置display:flex;justify-content:center;

垂直居中

实现垂直居中的父元素有定高或被子元素撑开高度。

子元素类型不同，采取的布局方案不同。下面进行分析：

1.子元素单行文本垂直居中：设置父元素的height等于行高line-height

以上文本不管是由块标签还是内联标签包裹的，都一样。

有一种很常见的图标加文字一起居中的布局待以后展开说。

2.子元素为定高的块元素：

1).父元素 height:xx; position: relative; 子元素 position: absolute; top: 50%; height: XX; margin-top: -XX/2;

2).父元素 height:xx; position: relative; 子元素 position: absolute; top: 0; buttom: 0; margin: auto; height: XX;

3) .外插div设置清浮动，代码如下：

xxx

#parent {height: 250px;}

#floater {float: left;

height:50%;

width:100%;

margin-bottom: -50px;

}

#child {

clear: both;

height: 100px;

}

3.通用方案(子元素为不定高的任何元素)

1).设置父元素 height:xx;display:table-cell;vertical-align:middle;

2).flex布局，给父元素设置 height:xx; display:flex; align-items:center;

3) . 父元素不设高，子元素设 padding: xx 0;

以上是本人目前了解的，若有看客，望不吝拍砖。

h5居中loading_H5样式与布局 --常用居中方法相关推荐

CSS七种常用居中方式
1. 水平居中效果: <!DOCTYPE html> <html lang="en"><head><title>水平居中</ ...
android gridview居中,Android中GridView布局实现整体居中方法示例
前言本文主要给大家介绍了关于Android中GridView布局整体居中的相关内容,是对于自己在项目中遇到问题的一个记录,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图: ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
文字图片居中html代码,文字和图片居中的HTML代码怎么写？
html文字居中和html图片居中方法代码,通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法,其中两种使用CSS样式实现,一直使用原始的html标签内加入"a ...
html怎么把文字居中6,html5怎么把文字居中
1.html如何让文字居中显示你的话有歧义,所以导致下面的回答有歧义. 两种情况:1.文本格式居中:2.文本所在标签居中显示在窗口中. 1.如其他匿名用户回答的一样,给文本所在标签加CSS属性值&q ...
css如何使字上下居中,css如何让字上下居中？
CSS可以使用align-items属性让文字上下居中,将文字所在容器定义为flex容器,然后设置align-items:center;样式即可让文字上下居中. css设置文字上下居中: #main ...
html中表格实现在页面居中显示,table居中显示 css table 单元格居中
怎么用css 让整个table位置页面水平居中, 在百度上找了半天发现没一个能用的需要准备的材料分别有:电脑.chrome浏览器.html编辑器. 首先,打开html编辑器,新建一个html文件, ...
php文字怎么居中,html文字和图片怎么居中？居中代码是什么
html文字和图片怎么居中?居中代码是什么?相信很多刚学css都会有这样的疑问,下面我们来总结一下.目前最新版本的HTML(HTML5)不支持"center"标签,因此您需要使用C ...
【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
zk 布局_ZK实际应用：样式和布局
zk 布局在先前的ZK in Action帖子中,我们使用ZK MVVM实现了CRUD功能 . 我们还快速浏览了一些样式代码,可能需要更多的解释. 在本文中,我们将介绍如何在ZK小部件上附加新CSS ...

h5居中loading_H5样式与布局 --常用居中方法

h5居中loading_H5样式与布局 --常用居中方法相关推荐

最新文章

热门文章