CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。相关的知识,希望对你有一定的参考价值。

以下是代码:
<body style="margin:0px;">
<div style="float: left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float: left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:inherit;"> 就是这个DIV怎么居中并置底!</div>
<div style="float: right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
求指导啊 啊啊

使用绝对定位方式可实现这个效果,如下边这个示例:


html代码:

<div class="box">
   <div class="demo">这个div要在box中水平居中,垂直居底</div>
</div>

CSS代码:

.con-boxposition:relative;width:800px;height:500px;background:#000;
.demoposition:absolute;width:200px;height:150px;bottom:0;left:50%;margin-left:-100px;

总结一下:

这个例子中 position:absolute;表示定义demo这div绝对定位,bottom:0;定义垂直居底,left:50%;margin-left:-100px;定义水平居中。

参考技术A <body style="margin:0px auto;;padding:0px;">
<div style="float:left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float:left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
<div style="text-align:centr; width:auto; margin-left:40%"> 就是这个DIV怎么居中并置底!</div>
</body>追问

你的可以居中 但是不能置底

参考技术B 大概了解你意思,很简单,
<body style="margin:0px;">
<div style="float: left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float: left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:inherit; float: left; height:20px; line-height:20px; padding-top:60px;"> 就是这个DIV怎么居中并置底!</div>
<div style="float: right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>追问

你的办法可以置底 但是不能居中

追答

加个text-align:center;或者 margin:0 auto;就可以剧中了

就是这个DIV怎么居中并置底!

追问

文字是可以居中了,但我在这个DIV里面插了一个表格,这句话加上去还是没有反应。

本回答被提问者采纳
参考技术C <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* div border:1px solid #006600; margin-top:2px; margin-left:2px;
</style>
</head>

<body>
<div style="height:410px; width:600px;">
<div style="height:300px; width:590px;">
<div style="height:290px; width:290px; float:left;">左</div>
<div style="height:290px; width:290px; float:left;">右</div>
</div>
<div style="height:100px; width:290px; float:left; margin-left:140px;">居中并置底</div>
</div>
</body>
</html>
如果可以,记得给最佳哦

css怎样让div里的表格居中对齐

表格在包含它的div里面水平居中,效果就是距离div的左右边距是一样的,多谢各位的帮助,谢谢.

css让div里的表格居中对齐的方法有很多,可以改变改变表格的样式属性,也可以通过改变div的样式属性,这里介绍通过改变表格的样式属性使表格居中,这样不会改变div里除表格的其他元素的样式属性和位置。以下演示具体步骤:

1、打开HTML文件编辑器,新建一个HTML文件并添加HTML的基本元素标签。

2、添加好基本元素标签后在body里添加div元素,然后在div元素里面添加一个表格元素。

3、接下来配置div元素样式和表格元素样式,使得效果可以明显体现出来,这里使用的是行内式,也可以使用行外式和外部式。其中核心代码都是:margin:auto。

4、保存好后运行这个HTML文件。效果如图:

参考技术A

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

1、第一步,打开HTML文件编辑器,创建一个新的HTML文件并添加HTML基本元素标签,见下图,转到下面的步骤。

2、第二步,完成上述步骤后,在body中添加一个div元素,然后在div元素内添加一个表元素,见下图,转到下面的步骤。

3、第三步,完成上述步骤后,配置div元素样式和table元素样式,这里使用行内式,其核心代码是:margin:auto,见下图,转到下面的步骤。

4、第四步,完成上述步骤后,保存并运行此HTML文件,表格已居中对齐,见下图。这样,就解决了这个问题了。

参考技术B 水平剧中,还是垂直剧中,是把表格居中还是表格里的内容剧中?
<div style="text-align:center; overflow:hidden;">
<table style="margin:0 auto; width:100px; height:50px;">
<tr><td style="text-align:center">ssss</td></tr>
</table>
</div>本回答被提问者采纳
参考技术C 最简单的就是不用CSS,表格那里直接写:<table align="center"></table> 参考技术D 在table里加align=“center”代码更简洁一些

以上是关于CSS 在一个大的DIV里面,另一个DIV怎么居中并置底。的主要内容,如果未能解决你的问题,请参考以下文章

div+css 怎么让一个小div在另一个大div里面 垂直居中

转:div+css 怎么让一个小div在另一个大div里面 垂直居中

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

CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右!

div+css 让一个小div在另一个大div里面 垂直居中

DIV在另一个DIV里面垂直居中,水平居中