css水平居中，竖直居中技巧（二）
css水平居中，竖直居中技巧（二）
===
### 1.效果
### 2.代码
#### 2.1.index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="renderer" content="webkit">
<title></title> <link rel="stylesheet/less" type="text/css" href="test.less"/>
<script type="text/javascript" charset="utf-8"
src="http://lib.jxt189.com/otherlib/less/2.6.1/dist/less.min.js"></script>
</head>
<body>
<h2>原始的效果</h2>
<div class="container">
<div>
<div>aaa</div>
<div>bbbbbb</div>
<div>ccccccccc</div>
</div>
</div>
<hr>
<h2>居中后的效果</h2>
<div class="container container-01">
<div class="container-02">
<div>aaa</div>
<div>bbbbbb</div>
<div>ccccccccc</div>
</div>
</div>
</body>
</html>
#### 2.2.test.less
.container {
width: 500px;
height: 300px;
background: red;
}
//核心代码
.container-01 {
display: table;
.container-02 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
###3.说明
a.使用这种方式实现水平居中和垂直居中，对`.container-02`的容器没有宽度和高度的要求
css水平居中，竖直居中技巧（二）的更多相关文章
- css水平居中，竖直居中技巧（一）
css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平竖直居中方式
CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...
- CSS -- 文字竖直居中
元素的height 和 lineheight 设置为一样即可.
- 水平/竖直居中在旧版Safari上的bug
今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...
- 常用布局，div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
- css控制竖直文字显示
假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...
- 三个css属性 设置文字竖直居中
display: flex; justify-content:center; align-items:Center;
- html的a标签display:block之后文字竖直居中
设置行高和a标签的高度一样就能居中,使用line-height
- html 水平竖直居中
line-height:容器高度 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- 关于matlab中定点数overflow的处理办法
定点数overflow的处理有两种办法:1,saturate,也就是说如果超过定点的最大值就取最大值,例如最大值是6结果是8,那么就取6:2,wrap,就是循环,如下图所示
- .ncx文件剖析
ncx文件是epub电子书的又一个核心文件,用于制作电子书的目录,其文件的命名通常为toc.ncx. ncx文件是一个XML文件,该标准由DAISY Consortium发布(参见http://www ...
- gprof的使用介绍
转于:http://blog.chinaunix.net/uid-25194149-id-3215487.html #不知道这是在哪里找的了,感谢各位~ 性能分析工具gprof介绍Ver:1.0 目录 ...
- eclipse marketplace网络连接失败的解决方法
2015-12-04 01:12:33 本想在eclipse上安装一个插件,点进help-EclipseMarketplace却连接失败,错误如下: 在help-instal new software ...
- ubuntu 12.04lts 安装mysql ，并通过QT连接
安装server$ sudo apt-get install mysql-server 安装驱动 $ sudo apt-get install libqt4-sql-mysql $ dpkg --li ...
- dwr的A request has been denied as a potential CSRF attack.错误
虽然DWR是个很早就出现的Ajax框架,但一直都没去使用过,今天正好没事就看了一下并参照文档照做了个demo, 在其中碰到一个问题: 后台打印出错误信息:“严重: A request has been ...
- angular的require模块的使用（$requireProvider的作用）
今天我们学习一下angular的另一个几乎被忽略的模块angular-require 先给出链接地址(git:) https://github.com/Treri/angular-requir ...
- jdk1.8新特性之方法引用
方法引用其实就是方法调用,符号是两个冒号::来表示,左边是对象或类,右边是方法.它其实就是lambda表达式的进一步简化.如果不使用lambda表达式,那么也就没必要用方法引用了.啥是lambda,参 ...
- 题目1413：神秘元素 ——lis的元素是否唯一
求序列的最长子序列中不可分割元素的数目.不可分割元素,肯定属于某一个最长子序列,首先做的就是把属于最长子序列的数提取出来,减小查找范围.怎么提取?可以用LIS(最长递增子序列)和LDS(最长递减子序列 ...
- 【CSS】文字超出显示省略号&连续字符换行
方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...