Question

我正在尝试水平居中对齐也具有固定位置的内联块元素。这是因为该元素也是通过变换转换的动画。目前的尝试看起来像这样：

.cd-nav-trigger {
position: fixed;
display: inline-block;
}

.cd-nav-trigger {
bottom: 7%;
left: 48.25%;
top: auto;
right: auto;
width: 44px;
height: 44px;    
z-index: 5;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}


.cd-overlay-nav, .cd-overlay-content {
/* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
position: fixed;
bottom: 7%;
left: 48.25%;
height: 4px;
width: 4px;
-webkit-transform: translateX(20px) translateY(-20px);
-moz-transform: translateX(20px) translateY(-20px);
-ms-transform: translateX(20px) translateY(-20px);
-o-transform: translateX(20px) translateY(-20px);
transform: translateX(20px) translateY(-20px);
}

HTML实现是这样的：

</div> <!-- cd-overlay-content -->

<a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a>

</div>

即使设置为50％，left属性也不允许我正确对齐元素。任何帮助将不胜感激。

Answer 1

尝试添加否定margin-left（width的一半）

.cd-nav-trigger {
  position: fixed;
  bottom: 7%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
}

<a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a>

水平居中对齐动画内联块与固定位置

1 个答案: