css和HTML布局小技巧
一：水平居中
1. 如下所示，让child在parent中水平居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{ width:300px; height:200px; border:1px solid #000; text-align: center; }
.child{ width: 50px; height:50px; border:1px solid red; display: inline-block;}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素）
第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）；
第三种方法：利用绝对定位和相对定位实现
.parent{
width:300px;
height:200px;
border:1px solid #000;
position: relative;//设置相对定位以配合子元素的绝对定位
}
.child{
width: 50px;
height:50px;
border:1px solid red;
position: absolute;
left:50%;
margin-left: -25px;//元素宽度的一半
}
二，垂直居中
第一种方法：和上面一样利用绝对定位
.parent{
width:300px;
height:200px;
border:1px solid #000;
position: relative;//设置相对定位以配合子元素的绝对定位
}
.child{
width: 50px;
height:50px;
border:1px solid red;
position: absolute;
top:50%;
margin-top: -25px;
}
第二种方法：
给parent增加
display:table-cell;
vertical-align: middle;
css和HTML布局小技巧的更多相关文章
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- css的几个小技巧
本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- css浮动布局小技巧
父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...
- css布局小技巧 2016.03.06
偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...
- 超 Nice 的表格响应式布局小技巧
今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...
- 25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...
随机推荐
- Zookeeper 集群安装配置，超详细，速度收藏！
今天,栈长分享下 Zookeeper 的集群安装及配置. 下载 下载地址:http://zookeeper.apache.org/ 下载过程就不说了,我们下载了最新的zookeeper-3.4.11. ...
- [linux]解析crontab
linux提供了一个非常强大而且又比较好用的命令 [crontab] crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行, ...
- 《JQuery技术内幕》读书笔记——自调用匿名函数剖析
Javascript语言中的自调用匿名函数格式如下: (function(){ //do somethings })(); 它还有另外两种等价写法如下: //等价写法一 (function(){ // ...
- asp.net MVC 5 路由 Routing
ASP.NET MVC ,一个适用于WEB应用程序的经典模型 model-view-controller 模式.相对于web forms一个单一的整块,asp.net mvc是由连接在一起的各种代码层 ...
- mysql 开发进阶篇系列 47 物理备份与恢复(xtrabackup 的完全备份恢复，恢复后重启失败总结)
一. 完全备份恢复说明 xtrabackup二进制文件有一个xtrabackup --copy-back选项,它将备份复制到服务器的datadir目录下.下面是通过 --target-dir 指定完全 ...
- Android主线程的消息系统(Handler\Looper)
前言: 之前的文章写的都是关于Bitmap和内存的优化技术,这一篇文章给大家谈谈Handler. Handler是Android系统中比较重要的一个知识,在Android多线程面试经常会被问到,在实际 ...
- DWR第三篇之逆向Ajax升级
1. 本示例在第二篇架构基础上添加代码 2.在client.jsp开头的地方添加如下代码: 本示例需要做的是定向推送,那么就需要浏览器进行登录,从而进行定向的推送功能,为了节省时间,这里不做登录模块了 ...
- mysql滑动聚合
滑动聚合是按顺序对滑动窗口范围内的数据进行聚合的操作.下累积聚合不同,滑动聚合并不是统计开始计算的位置到当前位置的数据. 这里以统计最近三个月中员工第月订单情况为例来介绍滑动聚合. 滑动聚合和累积聚合 ...
- Mysql加锁过程详解（7）-初步理解MySQL的gap锁
Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...
- 面试题·HashMap和Hashtable的区别(转载再整理)
原文链接: Javarevisited 翻译: ImportNew.com- 唐小娟 译文链接: http://www.importnew.com/7010.html HashMap和Hashtabl ...