css div 垂直居中
参考:http://css-tricks.com/centering-in-the-unknown/
<style>
.valign {
font-size: 0px;/* clear spacing*/
}
.valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.valign-middle,
.valign-bottom {
display: inline-block;
font-size: 1rem;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: bottom;
}
</style>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-middle" style="border:1px solid blue;">
我在中间
</div>
</div>
<br>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-bottom" style="border:1px solid blue;">
我在底部
</div>
</div>
css div 垂直居中的更多相关文章
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css div垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- html css div img垂直居中
<head> <meta charset="UTF-8"> <meta name="Generator" content=&quo ...
- 让div垂直居中的5种方法
方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...
随机推荐
- Swift 2.0 : 'enumerate' is unavailable: call the 'enumerate()' method on the sequence
Swift 2.0 : 'enumerate' is unavailable: call the 'enumerate()' method on the sequence 如下代码: for (ind ...
- 点分十进制IP校验、转换,掩码校验
/***************************************************************************** * 点分十进制IP校验.转换,掩码校验 * ...
- PHP Simple HTML DOM Parser Manual-php解析DOM
PHP Simple HTML DOM Parser Manual http://www.lupaworld.com/doc-doc-api-770.html PHP Simple HTML DOM ...
- c可变参数函数
C函数要在程序中用到以下这些宏: <pre lang="c" escaped="true">void va_start( va_list arg_p ...
- Android手机部分名词浅谈
1.什么是Radio? Radio是无线通信模块的驱动程序,ROM是系统程序,radio负责网络通信,ROM和Radio可以分开刷,互不影响.如果您的手机刷新了ROM后有通讯方面的问题可以刷新radi ...
- Unicode和汉字编码小知识
Unicode和汉字编码小知识 将汉字进行UNICODE编码,如:“王”编码后就成了“\王”,UNICODE字符以\u开始,后面有4个数字或者字母,所有字符都是16进制的数字,每两位表示的256以内的 ...
- Codeforces Round #217 (Div. 2) c题
C. Mittens time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- Bat 循環執行範例
@echo off @echo Please key in runcount num. Info:max=100 set /p a= for /l %%i in (1,1,%a%) do ( echo ...
- sed命令使用记录
背景:文件A,文件B,文件格式一致,有两列,第一列为key,第二列为value. 目的:将文件A中的内容插入到文件B中,不能在最后,不能有重复key(我的key和value用tab键分割) 实现:我的 ...
- LoadRunner--内存指标介绍
Threads——线程数当前全部线程数============================================ Available MBytes——物理内存的可用数指计算机上可用于运行 ...