浮动元素垂直居中，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 ...
随机推荐
- java多线程 -- 原子量 变量 CAS
多线程原子性问题的产生和解决 原子变量:在 java.util.concurrent.atomic 包下提供了一些原子变量. 1. volatile 保证内存可见性,可以查看atomic中变量是使用v ...
- NOIP2015D2总结
今天居然考了一套题.NOIP2015D2. 这是当年的战绩: 360的一等奖线.好强啊! 之前做过2015的D1,但我确实不会做landlord……今天曾祥瑞学长和林可学姐都来了,他们说,朱昶宇AK, ...
- Centos 7安装Python3.6
1> 安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...
- c/c++基本数据类型转换
If either operand is of type long double, the other operand is converted to type long double. If the ...
- 设计模式之单例模式实现(C++)
#ifndef SINGLETON_H #define SINGLETON_H #include <cassert> #include <memory> #include &l ...
- Python常见初级错误
一.常见错误(编辑器:Geany) 1.错误原因:或因不兼容中文注释 2.错误原因:vehicles变量前面有多余的空格 3.错误原因:没有正确的缩进(indent)
- 【Asp.net入门2-01】C#基本功能
C#是一种功能强大的语言,但并不是所有程序员都熟悉我们将在本书中讨论的所有功能.因此, 本章将介绍优秀的Web窗体程序员需要了解的C#语言功能. 本章仅简要介绍每一项功能.有关C#语言本身的知识不是本 ...
- Java入门：JDK与Eclipse之类的集成开发工具的关系
JDK是Java Development Kit,也就是说Java开发所需的工具包.有了这个东西,一切Java开发理论上都不是问题了.当然,根据你下载的版本不同,可能擅长的领域不同.通常大家都是用JD ...
- css选择器 nth-child
html代码: <div> <p>多云转晴</p> <p>多云转晴</p> <p>多云转晴</p> <p> ...
- MongoDB 数据迁移和同步
MongoDB 数据迁移和同步 MongoDB的数据同步 复制 mongodb的复制至少需要两个实例.其中一个是主节点master,负责处理客户端请求,其余的都是slave,负责从master上复制数 ...