浮动元素垂直居中，bootstrap栅格布局垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
position: relative;
border:thin solid red;
width:900px;
height:100px;
}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;
}
.center-vertical{
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="d1">
<div id="d2" class="center-vertical"></div>
</div>
</body>
</html>
浮动元素垂直居中，bootstrap栅格布局垂直居中的更多相关文章
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- Bootstrap栅格布局系统的特点
栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...
- bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
- bootstrap栅格布局
<!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...
- bootstrap栅格布局，第一次成功
代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...
- CSS：谈谈栅格布局
检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...
- 如何垂直居中元素（浮动元素&居中一个<img>）？
1.如何居中一个浮动元素? 方法一:已知元素的高度 <!DOCTYPE html> <html lang="en"> <head> < ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- HTML5如何垂直居中一个浮动元素
html如何垂直居中一个浮动元素//方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position:absolu ...
随机推荐
- Qt Creater之hello world
下载Qt Creater,博主是Qt5.2.0版本: 15:17:16 打开界面,选择文件新项目, 文件名:hellodemo: 生成的文件有.pro时项目文件,包含项目的信息,mainwindow. ...
- Hystrix之Dashboard的常见问题
Hystrix Dashboard (断路器:Hystrix 仪表盘)只监控一个实例,而Turbine监控多个实例,要使用Turbine必须使用Hystrix,因为Turbine是为了监控断路器的状态 ...
- Chapter 1(数据结构绪论)
附件列表 数据结构绪论.jpg
- matlab --- plot画图
plot画的图形在上一个plot的figure中:hold on 添加图例:legend({'X','Y'}) 限制X轴Y轴的坐标范围:xlim([380 780]);ylim([0 2]) 或 ax ...
- D65光源
D65光源是标准光源中最常用的人工日光,其色温为6500K.英文名:Artificial Daylight 6500K.标准光源箱中的D65光源是模拟人工日光,保证在室内.阴雨天观测物品的颜色效果时, ...
- python中的协程并发
python asyncio 网络模型有很多中,为了实现高并发也有很多方案,多线程,多进程.无论多线程和多进程,IO的调度更多取决于系统,而协程的方式,调度来自用户,用户可以在函数中yield一个状态 ...
- day4 数组学习
java提供的数组排序操作:java.util.Arrays.sort(数组名): java提供的数组复制:system.arraycopy(源数组名称,源数组开始点下标,目标数组名称,目标数组开始下 ...
- android 自定义TODO
1.找到setting -> editor -> TODO 2. 正则的写法参考以前的就可以 这样我们就可以自己写一个todo了 3.TODO过滤: 4. 然后选择要展示的TODO 这里就 ...
- sql 2012之后分页查询速度问题
一.SQL Server 2012使用OFFSET/FETCH NEXT分页,比SQL Server 2005/2008中的RowNumber()有显著改进.今天特地作了简单测试,现将过程分享如下: ...
- Elasticsearch技术解析与实战（三）文档的聚合
1.计算每个tag下的商品数量 PUT /database/_mapping/product { "properties": { "tags": { " ...