Question

我有以下HTML结构：

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  margin: 0 auto;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

我需要居中a.child2。我可以将text-align: center添加到div.parent来执行此操作。但在这种情况下，a.child1也会集中，我不想。

正如您所看到的，我还将margin: 0 auto;添加到了a.child2，但它仍然位于左侧。

总结一下，如何在a.child2左侧保持a.child1为中心？

Answer 1

将display属性设为block，将其显示在不同的行中。然后将text-align属性应用于.child2以将文本对齐到中心。

＆＃13;

.parent {
  border: 1px solid;
  width: 60%;
}
.parent a {
  display: block;
}
.child2 {
  text-align: center;
}

＆＃13;

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <a href="#" class="child2">this should be center</a>
</div>

＆＃13;

Answer 2

将.child2设为display:table

＆＃13;

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  margin:auto;
  display:table
}

＆＃13;

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

＆＃13;

Answer 3

您可以使用已经存在的display: table和margin: 0 auto进行对中。

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  display: table;
  margin: 0 auto;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

Answer 4

要使margin: 0 auto工作，您需要记住的事情很少。

元素必须display: block
元素必须不 float
元素必须不具有固定或绝对位置
该元素的width必须不是自动的。

因此，在您的情况下，只有2件事情遗失 - width＆amp; display: block（因为<a>默认为display:inline-block）。这应该修复

.child2{
  margin: 0 auto;
  width:40%;
  display: block;
}

Answer 5

将这些行放在p标记中，并将text-align: center分配给第二个：

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  text-align: center;
}

<div class="parent">
<p class="child1">
  <a href="#" >it should stay in the left side</a>
  </p>
<p class="child2">
  <a href="#">this should be center</a>
</p>
</div>

Answer 6

如果您不介意，可以将child2显示为内嵌块和宽度100％，然后您可以将其内容集中。

.parent{
  border: 1px solid;
  width: 60%;

}

.child2{
 width:100%;
 text-align:center;
 display: inline-block;
}

<div class="parent">
  <a href="#" class="child1">it should stay in the left side</a>
  <br>
  <a href="#" class="child2">this should be center</a>
</div>

如何使元素水平居中？

6 个答案: