HTML水平居中和垂直居中的实现方式
父元素是块元素,根据子元素不同分为以下几种:
1.子元素是行内元素:
a.水平居中:在父元素上设置text-align:center;
b.垂直居中:在行内子元素上设置行高与父元素相同line-height=parent.height;
2.子元素是多行内联文本或图片:
a.水平居中:父元素设置text-align:center;
b.垂直居中:父元素设置display:table-cell;vertical-align:middle; 3.子元素是块元素:
a.水平居中:子元素设置左右自动margin: 0 auto;
b.垂直居中:与多行内联文本或图片处理方式一致display:table-cell;vertical-align:middle; 4.子元素是不定宽块元素:
a.水平居中:父元素设置text-align:center;
b.垂直居中:可给分页的ul加行高line-height=parent.height;
c.底边居中:更为常用,与多行内联文本或图片垂直处理方式一致display:table-cell;vertical-align:bottom; 表格:
a.水平对齐:table设置text-align:center;
b.垂直对齐:table中设置vertical-align:middle;
HTML水平居中和垂直居中的实现方式的更多相关文章
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- 设置 img 在 div 中水平居中和垂直居中
Ø 前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1. css 代码 <style ty ...
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中(转)
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- div中如何让文本元素、img元素水平居中且垂直居中
一.文本元素在div中的水平居中且垂直居中方法 html代码 <div id="box"> <p>文本元素</p> </div> c ...
随机推荐
- 6409. 【NOIP2019模拟11.06】困难的图论(Tarjan求点双)
题目描述 Description 给定由 n 个点 m 条边组成的无向连通图,保证没有重边和自环. 你需要找出所有边,满足这些边恰好存在于一个简单环中.一个环被称为简单环,当且仅当它包含的所有点都只在 ...
- js 遍历数组取出字符串用逗号拼接
var arr = [{"name":"hhh"},{"name":"dddd"}] //用js function ge ...
- Laya 使list渲染支持分帧的思路
Laya 使list渲染支持分帧的思路 @author ixenos 2019-09-06 1.由于Laya的list渲染时没有做分帧处理,只做了延迟帧处理,所以当单页元素较多时,会有大量运算卡帧的情 ...
- 洛谷P3373 【模板】线段树 2 && P2023 [AHOI2009]维护序列——题解
题目传送: P3373 [模板]线段树 2 P2023 [AHOI2009]维护序列 该题较传统线段树模板相比多了一个区间乘的操作.一提到线段树的区间维护问题,就自然想到了“懒标记”:为了降低时间复 ...
- UE4网络功能相关笔记
RepNotity的作用 把变量设置成RepNotify除了像C#语言中的"属性"一样,提供一个改变变量时调用一个函数的机会以外,其真正重要的作用其实是应对网通同步延迟问题. 一定 ...
- 快速构建Spring Cloud工程
spring cloud简介 spring cloud为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行环境 ...
- 解决 ffmpeg 在avformat_find_stream_info执行时间太长
用ffmpeg做demux,网上很多参考文章.对于网络流,avformt_find_stream_info()函数默认需要花费较长的时间进行流格式探测,那么,如何减少探测时间内? 可以通过设置AVFo ...
- 源码编译安装Apache/2.4.37-------踩了无数坑,重装了十几次服务器才会的,不容易啊!
1.先进入/usr/local/中创建三个文件夹 apr apr-util apache cd /usr/local目录 mkdir apr mkdir apr-util mkdir apache 2 ...
- 图论&线性基(?)(8.12)
边没有负权,最短路最多只有n条边 很暴力的思想: 先跑一遍最短路,找出最短路上的边,枚举每条边,翻倍,放进原图再跑一遍.取最大值 好熟悉啊 分层建图,建k层 每层内部是原图 若原图中u到v有连边,则由 ...
- linux安装 redis
通过源码编译安装 1.下载源码包 wget http://download.redis.io/releases/redis-4.0.10.tar.gz 2.解压缩redis tar -zxf redi ...