浮动元素垂直居中，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 ...
随机推荐
- 使用EntitysCodeGenerate
http://bbs.csdn.net/topics/360256700 public DataSet xxx(DateTime start, DateTime end, string type) ...
- Linux应用程序设计之网络基础编程
1.TCP/IP协议概述 1.1.OSI参考模型及TCP/IP参考模型 OSI协议参考模型是基于国际标准化组织(ISO)的建议发展起来的,从上到下工分为7层:应用层,表示层,会话层,传输层,网络层,数 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- Ansible7：Playbook常用模块
目录 template set_fact pause wait_for assemble add_host group_by debug fail playbook的模块与在ansible命令行下使用 ...
- table 样式美化
1. 单像素边框CSS表格 这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added to your external sty ...
- vue 混入的理解
- 关于Linux用户名
1.创建/删除/修改用户名 useradd 选项 用户名其中各选项含义如下: 代码:-c comment 指定一段注释性描述.-d 目录 指定用户主目录,如果此目录不存在,则同时使用-m选项,可以创建 ...
- poj 3216 Repairing Company
http://poj.org/problem?id=3216 n个地点,m个任务 每个任务有工作地点,开始时间,持续时间 最少派多少人可以完成所有的任务 传递闭包之后最小路径覆盖 #include&l ...
- [ONTAK2015]Bajtman i Okrągły Robin
bzoj 4276: [ONTAK2015]Bajtman i Okrągły Robin Time Limit: 40 Sec Memory Limit: 256 MB Description 有 ...
- Git之初始化及提交操作
Git 的配置文件有三个: Git 把管理的文件分为了两个区域四个状态: 工作区: 当前开发程序所在目录称为工作区,该区域的文件会有状态的变化且状态由 git自动检测,程序中文件做任何操作(增.删.改 ...