【问题标题】:Can not align absolute div in center [duplicate]无法在中心对齐绝对 div [重复]
【发布时间】:2019-09-04 09:13:25
【问题描述】:

可能这与它的位置是absolute 的事实有关,但您仍然如何将absolute 定位为div 居中?

使用top,而不是margin-top 有效,但left 代替margin-left 不会影响它 .为什么?

.title
{
  display:block;
  position: absolute;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  top : 80%;
}




<div class="title fontHugeTitle2"><h1> The Best  In Town </h1></div>

【问题讨论】:

  • 你的html代码是什么?能否添加完整的相关代码

标签: css


【解决方案1】:

left: auto; right: auto 不能像 margin: 0 auto 那样使 div 居中,但是你有一个固定的宽度,你可以将 left 属性设置为剩下的一半,例如left: 5%

【讨论】:

  • 谢谢,我不明白 :) 我明白该怎么做,但不明白为什么它不能与左/右自动一起工作
  • 您的解决方案有效,但为什么我的解决方案无效?背后的逻辑是什么?
  • @Curnelious 'left:auto' 和 'right:auto' 不适用于居中层。它们用于覆盖现有位置。例如,如果您想将图层大小从左侧设置为实际大小,请先设置“left:0”,然后在事件后设置“left:auto”。
  • @Curnelious 至于预期的结果,文档说 - '当左和右都被定义时,元素的位置被过度指定。在这种情况下,当容器从左到右时,left 值优先(因此,right 的计算值设置为 -left);当容器从右到左时,右值具有优先权(因此,left 的计算值设置为 -right)。 - developer.mozilla.org/en-US/docs/Web/CSS/left
  • @VelimirTchatchevsky 我没有设置左右,所以你刚刚展示的文档是不相关的。我确实将它们设置为自动,文档应该使元素居中。仍然不确定为什么绝对元素不会听他们。
【解决方案2】:

添加

div {
  width: 100%;
}

改变

<div class="title fontHugeTitle2"><h1> The Best  In Town </h1></div>

<div class="fontHugeTitle2"><h1 class="title"> The Best  In Town </h1></div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-19
    • 2014-07-13
    • 2018-09-09
    • 2019-12-26
    相关资源
    最近更新 更多