1

我是 html 和 css 的新手，我不知道如何在父 div 中居中对齐子 div。这是我的代码，请回答并解决我的问题。

CSS

.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}

.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}

* {
padding:0px;
margin:0px;
}

HTML

<div class="page">
<div class="window"><!--  i want to center align this div inside above div  -->
</div>
</div>
4

5 回答 5

2

首先，没有什么叫float:center;，float只有 3 个有效值none，即left和right。

为了使任何元素居中，您需要先定义一些元素，width然后再将margin: auto;其水平居中。

演示

使元素居中的另一种方法是text-align: center;在父元素上使用，但这是一种肮脏的方式。

您还可以使用 CSS 定位技术，例如将absolute元素嵌套在已relative定位的元素中，然后使用 和 将其居中，然后使用（总元素说 is ）left: 50%;减去元素总数的 1/2 。您也可以垂直放置元素。widthmargin-left: -100px;width200pxcenter

使元素垂直和水平居中的另一种方法是使用display: table-cell;属性以及vertical-align: middle;

演示

于 2013-11-13T06:05:57.707 回答
0

您的“窗口” div正确地位于“页面” div 的中心。

您的问题是页面 div 不在<html></html>.

要实现这一点，请添加以下代码：

.page
{
...
margin-left:auto;
margin-right:auto;
}
于 2013-11-13T06:09:59.380 回答
0

尝试这个，

.window
{
    width:367px;
    height:202px;
    background-color:#c6c6c6;
    margin: auto 0px; /* For center. Apply same to page class*/
}

这可能有效。

于 2013-11-13T06:11:06.183 回答
0

水平居中

.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
width:367px;
height:202px;
background-color:#c6c6c6;
margin:auto;
}

垂直和水平居中

.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
top:50%;
left:50%;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:-183px;
margin-top:-101px;
}
于 2013-11-13T06:05:10.813 回答
0

请在此处查看：

.page
{
  position:relative;
  width:1220px;
  height:670px;
  background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
  width:367px;
  height:202px;
  background-color:#c6c6c6;
  margin:0px auto;  /* to align center horizontally*/
}
于 2013-11-13T06:06:37.500 回答