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 ...
随机推荐
- 工欲善其事,必先利其器-Python编辑器选择(2)
前言:工欲善其事.必先利其器 一款顺手的好的编辑器可以让程序员写代码更得心应手,效率也会更高,但是编辑器本身没有好坏,只有使用者使用起来是否顺手而已,这里简单给大家介绍几款常用的可以编辑Python的 ...
- SVN用户切换
Eclipse的SVN插件Subclipse做得很好,在svn操作方面提供了很强大丰富的功能.但到目前为止,该插件对svn用户的概念极为淡薄,不但不能方便地切换用户,而且一旦用户的帐号.密码保存之后 ...
- 使用docker搭建数据分析环境
注:早在学习<云计算>这门课之前就已经知道docker,学习这门课时老师还鼓励我们自己尝试一下:但是直到去年年底才有机会尝试,用过之后感觉确实很好用.最近需要部署几个shiny应用,又回顾 ...
- webmagic 的 helloworld
<dependency> <groupId>us.codecraft</groupId> <artifactId>webmagic-core</a ...
- TensorFlow中的通信机制——Rendezvous（一）本地传输
背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 在TensorFlow源码中我们经常能看到一个奇怪的词——Rendezvous ...
- Multi-Model多模数据库引擎设计与实现
如今,随着业务“互联网化”和“智能化”的发展以及架构 “微服务”和“云化”的发展,应用系统对数据的存储管理提出了新的标准和要求,数据的多样性成为了数据库平台面临的一大挑战,数据库领域也催生了一种新的主 ...
- Ubuntu使用（二）——eclipse配置与问题
eclipse启动错误 修改eclipse.init的配置,主要加-vm以及下面的jre路径,路径前别留空格 之前因为加了空格,一直找不到原因,差点就打算装回windows了 openFile --l ...
- 工作中常用Windows快捷键整理（1）-快速关闭网页
打开桌面 win+D,显示桌面快捷键,不会关闭浏览器页面,是显示桌面. 关闭当前打开的所有标签页 Alt+F4,关闭当前打开的所有浏览器标签页. 关闭当前打开的标签页 Ctrl+W,关闭当前打开的标签 ...
- SET NOCOUNT { ON | OFF }
当 SET NOCOUNT 为 ON 时,不返回计数(表示受 Transact-SQL 语句影响的行数) SET NOCOUNT 为 ON 时,也更新 @@ROWCOUNT 函数. 当 SET NOC ...
- CentOS 7.0 上安装和配置 VNC 服务器
作为一个系统管理员,大多数时间是通过网络管理服务器的.在管理服务器的过程中很少会用到图形界面,多数情况下我们只是用 SSH 来完成我们的管理任务.在这篇文章里,我们将配置 VNC 来提供一个连接我们 ...