Question

我试图将链接元素中心对齐，在父元素内部，其中元素采用最小宽度和高度，就像使用display:inline-block时一样

.parent {
    text-align: -moz-center;
    text-align: -webkit-center;
    text-align: -ms-center;
}

.parent a {
    display:block;
    width:-moz-fit-content;
    width:-webkit-fit-content;
    width:-ms-fit-content;
    background-color:red;

}


<div class="parent">
  <a href ="#">Link1</a>
  <a href="#">Link2</a>
</div>

我发现它适用于Chrome和Firefox但不适用于IE。有谁知道IE中的-moz-center和-moz-fit-content相当于什么？

Answer 1

为什么不使用实际的inline-block作为容器？此外，display:table和float:left也会产生相同的效果。

＆＃13;

.parent {
  display: inline-block;
  background: #eee;
}
.parent a {
  display: block;  
  text-align: center;
}

＆＃13;

<div class="parent">
  <a href ="#">Link1 is long</a>
  <a href="#">Link2</a>
</div>

＆＃13;

Answer 2

它与您的主题无关，但我仍有疑问？

为什么要使用-moz-center和-moz-fit-content ???

您可以通过其他方法呈现相同的结果

看到这个问题 http://jsfiddle.net/mk2zxujx/6/

例如

.parent{
margin:auto 0;
text-align:center;
}


.parent a {
display:block;
background-color:red;
color:white;    
}


a{
  width:auto;// to make it responsive - you can give your own value if you want
  min-width:50px; //since you asked for a minimum width 
}

我希望它能在所有浏览器中使用

Answer 3

我想补充一点，如果您要设置内部区域的宽度，最好使用：

width: intrinsic;

这将使用您所拥有的区域的宽度而不是整个区域。

Answer 4

只需将父级设置为显示弹性内容和中心内容：

display: flex;
justify-content: center;

什么是等效的-moz-fit-content和-moz-center

4 个答案: