以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。
<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<div id="layout">标准之路www.aa25.cn</div>
请看这段代码,宽度为适合800×600分辨率浏览器的宽度,margin:0 auto; 这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。
那么可能你要问了,text-align:center;为什么还要让内容居中呢?呵呵,别着急,这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救,以下在设计内容时再用 text-align:left;就可以了。
注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标准之路www.aa25.cn</title>
<style>
#layout { width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px;}
</style>
</head>
<body><div id="layout">标准之路www.aa25.cn</div>
</body>
</html>
文章出处:标准之路(http://www.aa25.cn/css_example/334.shtml)
让div居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二列固定宽度居中——AA25.CN</title>
<style type="text/css">
<!--
#layout {
width: 404px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="layout">
<div id="left">左列</div>
<div id="right">右列</div>
</div>
</body>
</html>
如果是单行文字垂直居中则用line-height设置为和height一样的值。
分享到:
相关推荐
在本文中,我们介绍了使一个元素在另一个元素中居中的三种不同方法,包括使用marginand padding、positionandtransform以及 flexbox/grid 布局。 这些方法都有其独特的优点和缺点。自动边距方法是最容易设置的,...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; } 第二种方法(兼容IE): CSS Code复制内容到剪贴板 body { text-align: center; } div { margin: 0 auto...
相对于body居中的另外一种写法 原理比较难以理解,这里只简单的说下如何使用: 1、在body的根目录下建立两个嵌套的div 2、分别给两个div加上样式属性即可,详细请见附件index.html文件
而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现。这里主要介绍一下采用css的方法,有什么问题还请各位看官指出。 方法一:用一个“ghost”伪元素(看不见的伪元素)和 ...
接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助
第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; } 第二种方法(兼容IE): CSS Code复制内容到剪贴板 body { text-align: center; } div { margin: 0 auto;...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以...如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需
下面小编就为大家带来一篇让DIV水平垂直居中的两种完美方法推荐。一起跟随小编过来看看吧。希望给大家一个参考
如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现: 复制代码代码如下: #div-a{ height:60px; line-height:60px; } 如果是多行文字,上面的...多行文字居中还有另外一种方法
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex(子级宽高可固定也可不固定,随意) 定位+margin(固定子级的宽高,margin-top,margin-left取自身一半的负值) 定位+transform(不固定子级的宽高) flex...
今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明: 外侧...
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。...在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为
正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:<style type=”text/css”>#con{...
解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家。 方法一: 1、HTML 部分: <div class=box> 我是浮动的 我也是居中的 </div> 2、CSS 部分: .box{ float:left; position:...
纯CSS,完全无需JS实现自适应居中并且兼容IE7+ Chrome FireFox 等,对JS程序猿来说一种解放,下面有个不错的示例,大家可以参考下
我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试...
方法一:把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性。结构效果如下:CSS 复制代码代码如下:div#wrapper { display: table; width: 500px; height: 500px; background-color: #c00...
1、 响应式布局如何实现 2、三种方式实现一个 div 水平和垂直方向的居中 3、 数据类型判断 4、 rem 布局原理 5、 Arguments 6、 原型和原型链