已知宽高和未知宽高的div块的水平垂直居中
//已知宽高的情况
.div1_container{
border:1px solid #00ee00;
height:300px;
position:relative;
}
.div1_center{
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
//未知宽高的情况
.div2_container{
text-align:center;
height:400px;
border:1px solid #0000ed;
}
.div2_container:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.div2_center{
display:inline-block;
vertical-align:center;
border:1px solid red;
}
已知宽高和未知宽高的div块的水平垂直居中的更多相关文章
- 先查出已知的 然后将未知的当做 having里面的条件
先查出已知的 然后将未知的当做 having里面的条件
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- java基础 File与递归练习 使用文件过滤器筛选将指定文件夹下的小于200K的小文件获取并打印按层次打印(包括所有子文件夹的文件) 多层文件夹情况统计文件和文件夹的数量 统计已知类型的数量 未知类型的数量
package com.swift.kuozhan; import java.io.File; import java.io.FileFilter; /*使用文件过滤器筛选将指定文件夹下的小于200K ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- table-cell实现未知宽高图片,文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- css 水平垂直居中显示(定高不定高定宽不定宽)
position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
随机推荐
- [py]软件编程知识骨架+py常见数据结构
认识算法的重要性 - 遇到问题? 学完语言,接到需求,没思路? 1.学会了语言,能读懂别人的代码, 但是自己没解决问题的能力,不能够把实际问题转换为代码,自己写出来.(这是只是学会一门语言的后果),不 ...
- Linux挂载共享命令
用于多台Linux服务器之间共享数据: mount -t cifs -o username=administrator,password=" //10.10.51.202/m /bak
- python string method
嗯,学习其它语言没这样全练过,嘻嘻 //test.py 1 # -*- coding: UTF-8 -*- 2 3 str = "i am worker" 4 print str. ...
- js使用的一些实用技巧
1.jquery中页面定时调用ajax方法 function SetContinueSend(param1,param2, func){ func.call(null,param1,param2) } ...
- 关于new 这个动作怎么理解面试遇到过
new的时候 到底发生了什么 function B(name) { this.name = name this.getName = function() { console.log(this.name ...
- ASP.Net Core 2.2 MVC入门到基本使用系列 (三)(转)
本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...
- 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 实时计算DStream下求平均值(reduceByKey or combineByKey)
对NC市的卡口数据进行分析,大概所有卡口每15秒接入的有效数据在3000条左右,现在产品经理要求对这些数据进行拥堵分析,通过两个卡口之间的车辆行驶时长来判断道路的拥堵情况.具体算法不展开.其中我需要做 ...
- spring之继承配置
我们有一下两个类,并且Gradate类继承了Student类 public class Student public class Gradate extends Student 在applicatio ...
- hadoop2.4.1 伪分布
最终的 /etc/profile :#在文件最后添加 # /etc/profile # System wide environment and startup program ...