css 样式里面怎么让一个DIV居中 ?

html-css0876

css 样式里面怎么让一个DIV居中 ?,第1张

通常的方法为:先设置div的宽度,然后使用如下样式:

margin: 10px auto /* 上下边距10px,左右边距自动以达到左右居中的目的*/

以下为示例:

HTML代码中给出div

<div class="outer">

<div class="content"></div>

</div>

添加样式

/*外层边框*/

div.outer{width:200pxheight:150pxborder:1px solid green}

div.content{

width:100pxheight:50px /*设置大小*/

margin:20px auto        /*设置左右边距自动以使其居中*/

border:1px solid red

}

显示效果

方法和详细的操作步骤如下:

1、第一步,打开html编辑器并创建一个新的html文件,具体见下面的图示,进入到下一步骤中。

2、第二步,新建完一个新的html文件后,在index.html的<style>标签中,输入如下所示的CSS代码,具体见下面的图示,进入到下一步骤中。

3、第三步,输入完CSS代码之后,接下来运行index.html页面。

可以发现,本地图片通过背景图片中的本地路径成功调用为了背景图片,具体见下面的图示。这样,图片就成功加入了。

一般来讲针对整体的式样必须放到css里面,这样可以制定全局的整体的风格。

还有些复杂的滤镜效果也应该放到css里,可以精简jsp(或者其他页面的代码)。

其实一般来说,我们建议把样式尽量都放到css中,这样样式一旦有变更可以只修改变css,而无需修改其他代码,可以有效的降低作业负荷,避免漏改和误改的发生。这点在做大型项目时尤其重要。