在DW中如何在CSS里实现页面居中?
DW只是一个很多代码编辑器中的一个
你说的css页面居中有很多种方法,举两种中常见的
(1)想将宽1000px的div实现在网页居中位置,利用margin:0 auto;这样可以实现上下边距是0,左右居中
(2)比如想将宽度1000px,高400px的div实现在网页中居中,可以将body给position:relative;然后将1000px的div给position:absolute;left:50%; top:50%; margin-left:-500px; margin-top:-200px;就可以实现网页上下左右都居中
要使元素居中,就要先规定该元素的宽度,再设置CSS中的margin属性(外边距)即可,属性值为:auto。
例如规定一个1000像素宽的div,要令这个div在页面的水平位置居中显示,样式代码书写:div {width:1000px; margin:auto} 或 div {width:1000px; margin: 0 auto}。
第一句代码的意思是:div宽度1000像素,边距自动。
第二句代码的意思是:div宽度1000像素,上下边距为0,左右边距相等(自动)。
这样设置后元素就会在水平方向居中显示了。
如果非要在DW软件中设置CSS样式,步骤如下:
1、鼠标移上DW右上角的“CSS”样式,右键“新建样式”;
2、为样式命名,例如命名为”page“,选择“类”就以.开头,选择“高级”就以#号开头,如下图:
3、在弹出的CSS框左侧选择“方框”,先规定宽高样式,例如宽设置500像素,高为200像素,在“边界”属性中选择“自动”,这样元素的外边距就会在水平方向自动居中了,如下图:
4、然后将该样式应用到最外层的DIV,为了方便能看的清楚,给DIV加了一条红色的边框线,随后按F12浏览,如下图中红色的DIV元素在页面的水平位置已自动居中:
div.nav{
width:1100px;
margin:0 atuo; /* 网页里的div,img灯都可以用这个居中 */
}
<div class="box">css控制页面剧中,通常就是设置整个box的为一个固定的宽度,之后给他一个左右自动的外边距就可以解决这个问题了</div>
这个是对应的css代码
.box{width:1000px; margin:0 auto}
css控制页面剧中,通常就是设置整个box的为一个固定的宽度,之后给他一个左右自动的外边距就可以解决这个问题了