主页 / 问题 / 1255293
Accepted
Руслан Камов
Asked:2022-03-13 19:07:32 +0000 UTC2022-03-13 19:07:32 +0000 UTC

边距自动对齐不适用于内联块元素

  • 772

在上面的代码中，按钮应该居中，但它仍然保留在左侧。

.promo .promo_btn{
width:259px;
margin:118px auto 0 auto;
height: 63px;
border: solid 3px rgba(0, 0, 0, 0.07);
background-image: linear-gradient(to top, #1eacc7, #4ce2ff);
text-align: center;
color: #ffffff;
border-radius: 5px;

}

在此处输入图像描述

但是，如果您将显示更改为阻止，一切都会开始工作。

.promo .promo_btn{
display: block;
width:259px;
margin:118px auto 0 auto;
height: 63px;
border: solid 3px rgba(0, 0, 0, 0.07);
background-image: linear-gradient(to top, #1eacc7, #4ce2ff);
text-align: center;
color: #ffffff;
border-radius: 5px;

}

在此处输入图像描述

为什么会有这样的矛盾？如果它是一个 inline-block 元素，那么 margin 应该可以工作，但在这里它不想，给它 display : block 。有些双重标准。

css

1 个回答

  1. Best Answer

    CSS2的规范说：

    10.3.9 'Inline-block'，正常流程中的非替换元素

    'margin-left' 或 'margin-right' 的计算值 'auto' 变为使用值 '0'。

    也就是说，因为inline-block该值margin: auto将被简单地视为零。

    标准不是双重的，而只是针对每种情况而不同。这是无处不在的。它们margin有许多不同的，例如，您可以说垂直居中，给予display: flex或display: grid来自父母。

    • 1

相关问题