Question

我是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>

Answer 1

首先，没有任何名为float:center;，float只有3个有效值none，left和right。

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

Demo

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

您还可以使用CSS定位技术，例如在absolute定位元素中嵌套relative元素，而不是使用left: 50%;将其置于中心位置，而不是我们扣除其中的1/2使用width（元素margin-left: -100px;表示width），该元素的总200px。您也可以垂直center元素。

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

Demo

Answer 2

水平居中

.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;
}

Answer 3

请点击此处：

.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*/
}

Answer 4

您的“窗口”div在“page”div中居中正确。

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

要实现此目的，请添加以下代码：

.page
{
...
margin-left:auto;
margin-right:auto;
}

Answer 5

试试这个，

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

这可能有效。

如何将父div中的子div与css对齐？

5 个答案: