如何水平制作元素中心？

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

来源

2016-09-16 Martin AJ

设置display财产作为block显示他们在不同的行。然后将文本对齐属性应用于.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>

来源

2016-09-16 14:38:53

设置.child2到display: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>

来源

2016-09-16 14:39:23 dippas

注：这使得对事物的整个宽度的底线点击，在文本结束 –

@JonasGrumann事件固定 – dippas

好，还有这里的许多答案像你这样的，所以我不知道知道是谁先写下来的，我只是赞扬你的，因为这是我看到的第一个。 –

把那些线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>

来源

2016-09-16 14:40:47 Johannes

如果你有权访问html，这种方法将是我的首选。但是我会用'li'替换'p'，并将'div.parent'替换为'ul'。 – connexo

如果它是一个导航菜单，是的 – Johannes

我不明白这与导航元素有什么关系。无序列表是在具有共同语义来源的项目列表时使用的正确元素。 – connexo

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

来源

2016-09-16 14:40:50 kukkuz

如果你不介意的话，可以使显示的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>

来源

2016-09-16 14:41:22

为margin: 0 auto在那里工作，你需要记住一些事情。

元素必须display: block
元素必须不浮子
元素必须不具有固定或绝对位置
的元件必须具有width不是汽车。

所以你的情况只有2东西不翼而飞 - width & display: block（因为<a>是默认display:inline-block）。这应该可以解决

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

来源

2016-09-16 14:45:07

如何水平制作元素中心？

回答

相关问题