html页面中块级元素的居中
第一:在页面中使用 margin: 0 auto;居中;
<div>
<p>夜屋</p>
</div>
div {
width: 100%;
position: relative;
background-color: red;
}
p {
width: 800px;
margin: 0 auto;
background-color: #ccc;
}
第二:在页面中使用 left 及margin-left;
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.centerDiv{
display: block;
width:200px;
height:200px;
background-color:#69F;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
</style>
<div class="wrap">
<div class="centerDiv">上下左右居中方法2</div>
</div>
注意:需要垂直并且水平居中的元素必须是div,其他p类等块级元素用此方法不会居中(垂直和水平居中),若是用了非div元素,显示如下;
<div class="wrap">
<p class="centerDiv">上下左右居中方法2</p>
</div>
第三、图片的垂直居中,使用display: table-cell;
div {
width: 289px;
height: 1000px;
display: table-cell;
vertical-align: middle;
background-color: Gray;
}
<div>
<img src="../images/canvas.jpg" width="333" height="500">
</div>
html页面中块级元素的居中的更多相关文章
- 《Web开发中块级元素与行内元素的区分》
一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- css中块级元素、内联元素(行内元素、内嵌元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- html中块级元素和行内元素
块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元 ...
- HTML中块级元素与行内元素
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- HTML中块级元素和行内元素的总结和区分。
HTML标签 html标签定义: 是由一对尖括号包裹的单词构成,例如: <html>. 标签不区分大小写<html> 和 <HTML>, 推荐使用小写. 标签分为两 ...
- HTML中块级元素与内联元素有什么区别 ?
块级元素:默认宽度是100%(继承自父元素),如果块对象没有采用“float:left”或“float:right;”的样式,相邻的两个块对象就会分排在不同的两行上.例如,div, p, h1, fo ...
随机推荐
- POJ 2251 Dungeon Master【BFS】
题意:给出一个三维坐标的牢,给出起点st,给出终点en,问能够在多少秒内逃出. 学习的第一题三维的广搜@_@ 过程和二维的一样,只是搜索方向可以有6个方向(x,y,z的正半轴,负半轴) 另外这一题的输 ...
- 欢迎访问微先锋vXianFeng官方博客
欢迎访问微先锋vXianFeng官方博客,专注微商城.P2P理财.山寨矿机平台研究与开发!
- Zookeeper入门-Java版本HelloWorld例子
上一篇介绍了,Zookeeper的基本概念,怎么启动,怎么解决可能遇到的几个问题.本篇,根据网上代码,整理了一个例子,Zookeeper的HelloWorld. 下面这个代码,还是比较简单的,核心类就 ...
- POI0109 POD (最短路)
POI0109 POD (最短路) 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 现在让我们来对一个交通运输图进行研究,这 ...
- HttpService解析
HttpServlet容器响应Web客户请求流程如下: 1)Web客户向Servlet容器发出Http请求: 2)Servlet容器解析Web客户的Http请求: 3)Servlet容器创建一个Htt ...
- 一 SSH 无密码登陆 & Linux防火墙 & SELinux关闭
如果系统环境崩溃. 调用/usr/bin/vim /etc/profile SHH无密码登陆 所有要做得节点上运行 修改 host name vi /etc/sysconfig/netwo ...
- Maven的SSH搭建以及部署
本人有点傻,研究Maven研究了有一段时间,刚刚有些入门,记录下来方便以后使用 工作环境:jdk7 myeclipse10 maven3.1.1 1 下载maven3.1.1 http://maven ...
- spring security源码分析心得
看了半天的文档及源码,终于理出了spring-security的一些总体思路,spring security主要分认证(authentication)和授权(authority). 1.认证authe ...
- 洛谷P2598 [ZJOI2009]狼和羊的故事
题目描述 “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向......” Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! Orez的羊狼圈 ...
- 紫书 习题 10-17 UVa 11105 (筛法)
类似于素数筛的思想去做,不然暴力会超时而且还要判重 #include<cstdio> #include<cstring> #include<vector> #def ...