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 ...
随机推荐
- DedeCMS文章编辑不更新时间1970年1月1日
在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现 ...
- python在leecode刷题-第一题和第七题
class Solution(object): def twoSum(self, nums, target): """ :type nums: List[int] num ...
- Linux下切换python版本
http://www.cnblogs.com/rhjeans/p/5499193.html
- 洛谷 P3663 [USACO17FEB]Why Did the Cow Cross the Road III S
P3663 [USACO17FEB]Why Did the Cow Cross the Road III S 题目描述 Why did the cow cross the road? Well, on ...
- ZooKeeper 特性
ZooKeeper 拥有一个层次的命名空间.(like distributed) 注意:ZooKeeper 中不许使用相对路径. 一 ZooKeeper 数据模型 ...
- Nginx 性能调优
原文地址:http://nginx.com/blog/tuning-nginx/ Tuning NGINX for Performance Nginx 性能调优 NGINX is well known ...
- Android 五大存储方式具体解释
SharedPreferences与Editor SharedPreferences保存的数据仅仅要是类似于配置信息格式的数据.因此它保存的数据主要是简单的key-value对形式.以下关系图 上图全 ...
- Exchange2003迁移2010DAG的权限问题
exchange2010无法删除用户.在2010的控制台中新建一个通讯组.然后将它删除就会报告下面错误. MicrosoftExchange 错误:无法对对象"test"执行&qu ...
- SpringMVC 常见异常处理
1.javax.xml.bind.UnmarshalException: unexpected element (uri:"", local:"request" ...
- 灵活的运用Model类
1.定义接口 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespac ...