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 ...
随机推荐
- 什么是SQL
SQL是用于访问和处理数据库的标准的计算机语言 SQL是 访问 .处理数据库中的数据 ,这类数据库 包括Oracle, Sybase, SQL Server, DB2,Accesss等等 类型的数据库 ...
- python列表（list）的简单学习
列表是由一系列按特定顺序排列的元素组成, 是 Python 中使用最频繁的数据类型.列表可以完成大多数集合类的数据结构实现.列表中元素的类型可以不相同,它支持数字,字符串甚至可以包含列表.字典(即嵌套 ...
- Xamarin.Android 开发中遇到旋转屏幕错误
错误信息 : System.NotSupportedException: Unable to find the default constructor on type App5.MyFragment. ...
- linux 清空历史命令
系统版本:CentOS 6 history -c 命令可以清空当前窗口的历史输出命令. 要彻底删除历史命令可以有如下几种方式: 在当前用户的-目录下执行: 方式1: echo > .bash_h ...
- linux取IP的几个方法
ifconfig eth0|grep " inet add"|cut -d":" -f2|cut -d " " -f1 ifconfig e ...
- RESTful规范1
RESTful规范 一 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为"表征状 ...
- HP-JavaUtil: xls 操作类
Written In The Font 谢谢,陈明.哈哈!共勉,努力搞定它. 路漫漫其修远兮,吾将上下而求索 Content ExportExcelAndSave( String[] header, ...
- Nginx 配置https 服务
一.HTTPS 服务 为什么需要HTTPS? 原因:HTTP不安全 1.传输数据被中间人盗用.信息泄露 2.数据内容劫持.篡改 HTTPS协议的实现 对传输内容进行加密以及身份验证 HTTPS加密校验 ...
- linux 命令 — cut
cut 以列的方式格式化输出 依赖定界符 cut -f field_list filename 以默认定界符(tab,制表符)分割文件的列,输出指定的列field_list,field_list由列号 ...
- 计算n的阶乘有多少个尾随零
思路一: 计算出n!= nValue,然后 nValue % 10 == 0 则nCount自增1,nValue /= 10 直到条件为否,最后nCount就是我们想要的结果,代码如下: int Co ...