怎么在html中居中添加视频,HTML中的居中方法
之前我们就总结过很多剧中的方法,但是时间长不用,就会慢慢遗忘,所以我们从头来复习一次,变想边敲代码......
文本居中
height + line-height:两者配合使用,垂直方向居中
text-align:父级的text-align,水平方向居中
注意:text-align:center ;只是将子元素里的内联元素居中
如果不是内联元素就要用到 margin: 0 auto;
写个简单的代码来理解
.word{ width: 100px; height: 30px; background: #E5E5E5; text-align: center; line-height: 30px; font-size: 14px;
}
优秀
文字居中
优秀这两个字在div中妥妥居中。
水平居中
水平居中分两种情况
one:定宽块元素水平居中
定宽 + 块元素
来看看具体的代码.wrap{width:200px;
height:200px;
border:1px solid red;
margin:0 auto;} //宽度必须给值
two:不定宽块元素水平居中
1.改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中.nav{text-align:center;}
.nav ul{display:inline;}
- 1111111
- 2222222
2.父元素浮动left:50%;
同时要设置position:relative(给子元素相对定位一个参考)
子元素相对定位position:relative;left:-50%;.wrap{position:relative;
left:50%;
float:left;}
.box{position:relative;
left:-50%;}
垂直居中
垂直居中也分两种情况
one:块级元素垂直居中,子元素知道具体宽高
设置top:50%,这个块元素的最上边为垂直居中的位置,但是这样整体的内容并不是垂直居中,所以要设置margin-top: -2/父宽 px; //为高度的一半
这样这个块元素又相对于自身最上面向上又移动了自身的50%,因此就垂直居中了。.wrap { //父元素}
.wrap .content {
position: absolute;
width: 100px;
heigth: 100px;
top: 50%;
margin-top: -50px; //为高度的一半}
*** two:子元素不知道具体宽高 ***
这种情况有三种方法
第一种借助table布局;
第二种是借助translate的transform属性:.wrap { position: relative;
}.wrap .content { position: absolute; top: 50%; transform: translateY(-50%);
}
第三种就是用flex布局,非常的简单,代码如下:.wrap{ display: flex; flex-direction: column; justify-content: center;
}
万能居中方法
首先移动子元素高度(宽度)的一半:left:50%;(top:50%;)
再移动父元素高度(宽度)的一半:margin-left:-宽/2;(margin-top:-高/2;)
前提是必须要知道子元素的宽高.wrap{
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: hotpink;
position: absolute;
left:50%;
margin-left: -50px;
}
万能居中
绝对居中
子元素必须比父元素小,子元素宽高也必须要知道.wrap{
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: hotpink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
}
绝对居中
可能总结的也不太齐全,会慢慢补全。
作者:Passerbylll
链接:https://www.jianshu.com/p/397f9794c003
怎么在html中居中添加视频,HTML中的居中方法相关推荐
- Android开发,登录注册界面中如何添加视频背景,亲测可用
此篇文章属个人查阅资料整理所著,希望能对您有所帮助,欢迎各位留言指正,抱拳了 一. 首先在res文件夹下添加raw文件夹并将要添加的背景视频放进去: 二.在MyViewpager.java(此为要显示 ...
- python删除类方法_python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...
- Windows 10 中 Eclipse中无法添加Courier New字体的解决方法!
1,打开"C:\Windows\Fonts\"文件夹. 2,鼠标右键"Courier New",随后点击"显示",这样你就可以在Eclips ...
- python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...
- Markdown中如何插入视频 iframe?
关于Markdown中如何插入视频这一问题 网上众说纷纭,一直也没找到一个确切的答案,想来也是,这些东西毕竟还不算成熟.各种以前提供过的方法现在来讲,可能在更新或是关闭大潮中又没了 而且,Ma ...
- php cms使用视频教程下载地址,phpcms如何添加视频_CMS系统建站教程,phpcms
phpcms如何上传视频_CMS系统建站教程 phpcms上传视频的方法:首先使用ftp工具将视频文件上传到指定目录下:然后登录phpcms后台:接着在添加视频时,将该视频文件的网址引入进来即可完成视 ...
- vue 动态添加click_vue,在模块中动态添加dom节点,并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
- 深度学习在视频分析中的架构、算法及应用
直播与短视频业务的兴起,代表了一种内容交互方式的变化,更加追求强交互,这种变化催化了很多技术和架构的转型,由传统的传输.存储优先演进为计算与智能.本文是由360人工智能研究院视频大数据组技术负责人陈强 ...
- 解决安卓中单个dex方法数超过65535的方法
1.百度下载 60K-methods.jar包,复制至libs文件夹中,添加到gradle中 2.在build.gradle中的defaultConfig{}下添加 multiDexEnabled ...
最新文章
- python input 数字_Python:raw_input读取数字的问题
- .net mvc actionresult 返回字符串_Spring 框架基础(06):Mvc架构模式简介,执行流程详解
- 阿里云主机(aliyun-Linux) x64安装Redis详解
- django学习随笔:ManagementUtility
- Atitit 提升科技影响力 目录 1. 大原则	2 1.1. 科技强人必须是创新型[	2 1.2. 要有一定的体量和规模	2 2. 创新能力主要科技指标	2 2.1. 领域科技大奖与荣誉	2 2
- 2010年08期《程序员》配套源码及相关链接
- HTML5,不只是看上去很美(可交互地铁线路图)
- 贝叶斯⑤——搜狗新闻分类实战(jieba + TF-IDF + 贝叶斯)
- 调整亮度、对比度、饱和度和色相
- 头歌Python实训答案——函数结构
- 为了让你的硬盘资源能完好地传给你的曾曾曾孙,科学家想到了这些办法……...
- 使用vivado调用自定义IP的两种方法
- VA软屏和IPS硬屏的区别
- python教学计划_2017从零开始数据分析学习计划
- 爬有道在线翻译(已完善)
- itext 5 根据模板生成PDF util类
- SP91 未知唤醒源日志
- 关于B2C电子商务顾客忠诚度影响因素的问卷调查
- 网络工程师课程---3、IP与路由器(ip地址的主要作用是什么)
- [Shader]制作一个电流扩散效果