浮动元素垂直居中，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 ...
随机推荐
- boost::asio 同步&异步例子
同步客户端: using boost::asio; io_service service; ip::tcp::endpoint ep( ip::address::from_string(); ip:: ...
- interface思考练习一
参考了这篇文章,博主超级优秀,看他的最好,我只是写了点自己看他的博文学到的东西.CSDNzdwzzu2006 接口这东西认真学是在第一次构建工程的时候,很晕菜,原来学SE时不扎实,导致东西都不会用,看 ...
- bzoj 4332 FFT型的快速幂（需要强有力的推导公式能力）
有n个小朋友,m颗糖,你要把所有糖果分给这些小朋友. 规则第 i 个小朋友没有糖果,那么他之后的小朋友都没有糖果..如果一个小朋友分到了 xx 个糖果,那么的他的权值是 f(x) = ox^2 + ...
- python的tuple()元组数据类型的使用方法以及案例
一.元组的概念介绍 1.元组是列表的二次加工 列表可以被修改 列表的类型 list li = [1,2,3,4,5,6] 2.元组的元素不可被修改,不能被增加或者删除,(只是针对元组的一级元素是不可以 ...
- 抓包工具Charles
Charles Charles可以在windows,linux,mac各种操作系统上安装使用,它是java编写一款非免费工具:而fiddler只能在windows系统上使用 Charles抓包前,要确 ...
- NATS_05：NATS服务器部署
1.NATS安装前的普及 NATS 的服务器是使用 GoLang 语言开发的,其可执行文件的名字为:gnatsd,表示:Go NATS Daemon.NATS服务器是一个开源软件,基于 MIT 许可证 ...
- enumerate 遍历numpy数组
enumerate 遍历numpy数组 觉得有用的话,欢迎一起讨论相互学习~Follow Me 遍历一维数组 i,j 分别表示数组的 索引 和 存储的值 import numpy as np a=np ...
- Spring在Web容器启动时执行初始化方法
需求:在tomcat启动时开启一个定时任务. 想法:容器启动时执行方法,最容易想到的就是servlet中可以配置load-on-startup,设置一个正整数也就可以随容器一起启动. 问题:上面的方法 ...
- bzoj千题计划115：bzoj1024: [SCOI2009]生日快乐
http://www.lydsy.com/JudgeOnline/problem.php?id=1024 枚举横着切还是竖着切,一边儿分多少块 #include<cstdio> #incl ...
- [JSOI2007]字符加密Cipher
bzoj 1031:[JSOI2007]字符加密Cipher Time Limit: 10 Sec Memory Limit: 162 MB Description 喜欢钻研问题的JS同学,最近又迷 ...