已知宽高和未知宽高的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=& ...
随机推荐
- DataTable 指定位置添加列
dt.Columns.Add("id").SetOrdinal(指定位置);
- content_type
1.作用 将app名称与其中表关系进行保存 在models创建表时,关联到ContentType并不会产生实际的字段 2.使用 在models中代码 from django.db import mod ...
- 全连接与softmax[转载]
转自:https://www.jianshu.com/p/88bb976ccbd9 1.全连接示例: 2.softmax softmax输入层应和输出层(输出维度与类别数一致)纬度一样,如果不一样,就 ...
- [Java in NetBeans] Lesson 17. File Input/Output.
这个课程的参考视频和图片来自youtube. 主要学到的知识点有: We want to handle the bad Error. (e.g bad input / bugs in program) ...
- js贪心算法---背包问题
/* * @param {Object} capacity 背包容量 6 * @param {Object} weights 物品重量 [2,3,4] * @param {Object} values ...
- TensorFlow遇到的问题汇总(持续更新中......)
1.调用tf.softmax_cross_entropy_with_logits函数出错. #原因是这个函数,不能按以前的方式进行调用了,只能使用命名参数的方式来调用. #原来是这样的: tf.red ...
- express-generator 自动生成服务器基本文件
(1) 安装 express-generator 构建工具 npm install -g express-generator 在命令行中用 npm 在全局安装 express-generator 脚手 ...
- JDK源码调试常见错误。
1.删除不需要的代码,即swing相关的代码 2.执行命令时要将前提环境进入文件夹如下: 起初没有完全执行第一条,因为网上说可以根据需要选择相关的代码,于是就没有删除,以后第一次模仿网上的例子的时候要 ...
- jq文件上传及下载
一.使用jquery.form.js上传文件 jquery.form.js获取地址:https://pan.baidu.com/s/1nSdfkCt25Rc5cHMFJRVcUQ 提取码: sbmt ...
- caffe训练模型中断的解决办法(利用solverstate)
caffe训练过程中会生成.caffemodel和.solverstate文件,其中caffemodel为模型训练文件,可用于参数解析,solverstate为中间状态文件 当训练过程由于断电等因素中 ...