Question

<style>
  .dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
 -- text-align: center !important;
  transform: translate(-50%, 0) !important;
}
</style>

我试图将下拉按钮的下钻列表集中在引导程序4 ...有人可以解释这种风格吗？我的理解是翻译使用x和y轴..为什么会留下50％？为什么我只能把翻译（50％，0）替换为左？或只是使用左50％和右自动，不会被放在中心？

Answer 1

示例中的right属性并不重要 - 暂时忽略它。

示例中的left: 50%表示该元素应偏移 50％。这意味着只需添加left: 50%即可将.dropdown-menu-center的左边缘放在正中间，其中元素的中心位于右侧（具体地，页面的一半width加上一半元素width）。

这与transform: translate(-50%, 0);相对应，后者将元素向左移动了width的50％。因此，将其与left: 0相结合会将.dropdown-menu-center的中心放在页面的正中心。

但是，重要的是要注意，如果您使用relative positioning或absolute positioning，仅会有效：

＆＃13;

.dropdown-menu-center {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

＆＃13;

<div class="dropdown-menu-center"></div>

＆＃13;

希望这有帮助！：）

Answer 2

如果你想把div放在另一个的中心，你必须使用这个等式：（ DIV_A / 2） - （ DIV_B / 2）。 DIV_A 代表容器， DIV_B 代表内容。

高度属性相同。

您的案例是相同的操作

 left: 50%; // (DIV_A / 2)
 transform: translate(-50%,0); // - ( DIV_B / 2 )

CSS样式与翻译，左，右

2 个答案: