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 ...
随机推荐
- Target优化
优化目标主要包括以下几方面: 1 优化平面文件 如果目标平面文件在某机器的共享目录下,则该机器最好是专门用于文件存储的,如果还应用于其他非文件存储任务,则会降低加载效率 如果Integration s ...
- Oracle nal() 和count（*）的注意点
select count(*) into fhave from tab_ppxuser where name = userstr;和select nvl(hphotourl, '0') into ph ...
- 【ABP杂烩】Extensions后缀扩展方法
1.Extensions介绍 扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用 ...
- ElasticSearch入门1: mac 安装
入门学习顺序: 1. 安装: 1.1 单实例安装: Elastic官方网站: http://www.elastic.co 下载 ElasticSearch: 第一步:点击下载 第二步:点击downlo ...
- C++版 - 剑指offer 面试题4: 替换空格 题解
面试题4:替换空格 提交网址: http://www.nowcoder.com/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=1 ...
- Centos7安装MySQL8.0 - 操作手册
MySQL 8 正式版 8.0.11 已发布,官方表示 MySQL 8 要比 MySQL 5.7 快 2 倍,还带来了大量的改进和更快的性能! 一. Mysql8.0版本相比之前版本的一些特性 1) ...
- 【Python】正则表达式简单教程
说明:本文主要是根据廖雪峰网站的正则表达式教程学习,并根据需要做了少许修改,此处记录下来以备后续查看. <Python正则表达式纯代码极简教程>链接:https://www.cnblogs ...
- 简单了解static
初学java,面对着这个static修饰符,愣是琢磨了两天时间,还在今天琢磨透了,现在将悟到的东西记录下来: 1.static修饰符表示静态修饰符,其所修饰的内容(变量.方法.代码块暂时学到这三种)统 ...
- centos7安装遇到的坑
1.安装中遇到what is the location of the gcc program on your machine 直接输入 no.意思就是跳过gcc的安装了.但是系统虽然安装了vmware ...
- 解读经典《C#高级编程》第七版 Page20-32.核心C#.Chapter2
前言 讲到核心C#的语法,其实很难讲,因为大部分是基础知识.如果只讲入门的基础知识,那细节又多,意义也不大.我们就不讲一般性的内容,而是找一些有趣的点,展开讲讲. 01 Hello World Hel ...