margin-left：如何自动将元素向右对齐？

如何解决margin-left：如何自动将元素向右对齐？

    <style>
.Box {
  border: solid 1px;
  text-align: center;
  width: 200px;
  margin-left: auto;
}
</style>

<div class="Box">
  <strong>107</strong> Retweets
</div>

据我所知，margin: auto 应该使元素居中，对吗？ 但是 margin-left: auto 是如何将子元素与父元素右侧对齐的。

解决方法

发生这种情况是因为 auto 的值 margin 告诉浏览器计算它。 如果您同时设置 margin-left: auto; 和 margin-right: auto;，那么您将看到您的元素居中。

,

使用自动，浏览器会选择合适的边距来使用。

您可以将 margin-left: auto 视为将 div 定位到可能的最右侧位置。文档中提到了这一点：

左边距分享未使用的水平空间，这主要取决于所使用的布局模式。

.box {
  border: solid 1px;
  text-align: center;
  width: 200px;
  margin-left: auto; 
}
.box2 {
  border: solid 1px;
  text-align: center;
  width: 100px;
  margin-right: auto; 
}
.box3 {
  border: solid 1px;
  text-align: center;
  width: 100px;
  margin-right: auto; 
 margin-left: auto; 
}

<div class="box">
  <strong>107</strong> Retweets
</div>
<div class="box2">
  <strong>107</strong> Retweets
</div>
<div class="box3">
  <strong>107</strong> Retweets
</div>

如果同时使用 left 和 right auto，则元素居中以尊重两者。

,

auto 值告诉浏览器为您定义边距，here。

如果您将 ma​​rgin-right 和 ma​​rgin-left 都设置为 auto，

ma​​rgin 属性只会使元素居中>、或他们的简短版本ma​​rgin: 0 auto（在这种情况下为 0 顶部和 0 底部）和设置一些宽度 strong>，如果没有宽度，您的自动值无效。当您使用不支持 flexbox 的旧版浏览器（如 IE8-9）时，此属性非常有用。

注意点：

• 如果元素位置不是绝对的，只能是水平的，则不能设置边距来垂直居中元素。