如何使元素水平居中？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

How to horizontally center a <div>? 90 answers

如何水平居中

? 90个答案

I have the following HTML structure:

我有以下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>

I need to center a.child2 . I can do this by adding text-align: center to div.parent. But in that case, a.child1 will be centered too and I don't want to.

我需要以a.child2为中心。我可以通过添加text-align:center到div.parent来实现。但在那种情况下,a.child1也会集中,我不想。

As you can see, I've also added margin: 0 auto; to a.child2, but it is still placed on the left side.

如你所见,我还增加了保证金:0 auto;到a.child2,但它仍然放在左侧。

To sum up, how can I center a.child2 while mantaining a.child1 on the left side?

总结一下,如何在a.child1的左侧保持a.child2的中心?

6 个解决方案

#1

Set display property as block show them in different line. And then apply text-align property to the .child2 to align text in center.

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

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

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

#2

set .child2 to display:table

设置.child2显示:table

.parent{
  border: 1px solid;
  width: 60%;
}

.child2{
  margin:auto;
  display:table
}

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

#3

You can center using display: table and margin: 0 auto which is already in place.

您可以使用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>

#4

For the margin: 0 auto to work there are few things you need to keep in mind.

对于保证金:0自动工作,你需要记住几件事。

The element must display: block

元素必须显示:block

The element must not float

元素不能浮动

The element must not have a fixed or absolute position

元素不得具有固定或绝对位置

The element must have a width that is not auto.

元素的宽度必须不是自动的。

So in your case only 2 things were missing - width & display: block(since <a> is by default display:inline-block). This should fix

所以在你的情况下只缺少2件事 - width&display:block(因为是默认显示:inline-block)。这应该解决

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

#5

Put those lines in p tags and assign text-align: center to the second one:

将这些行放在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>

#6

If you don't mind, you can make child2 display inline-block and width 100%, then you can center its content.

如果您不介意,可以让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>

#1