如何使这个代码中心即使两个边距设置为自动？

-1

所以我有这个代码，并由于某种原因，它拒绝居中在页面的底部，即使当我将两个边距设置为“自动”。我真的不知道还有什么可以尝试的。如何使这个代码中心即使两个边距设置为自动？

.bottomcenter { 
    Position: absolute; 
} 

.bottomcenter { 
    position: fixed; 
    bottom: 0; 
    margin-right: auto; 
    margin-left: auto; 
}

来源

2014-08-28 Little Gamie

显示您的标记了。在[fiddle]（http://jsfiddle.net/）中显示你的代码。 – Benjamin 2014-08-28 15:05:35

当您设置一个元素position: fixed;它跳出页面流的，所以你不能用margin: auto;居中，你将不得不使用：

.bottomcenter { 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
    -webkit-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    -moz-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    -o-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    width: 200px; /*admitting you know the width of the element*/ 
    margin-left: -100px; /*this is half the with of the element, admitting it is fixed*/ 
}

来源

2014-08-28 15:07:54

是的，它做到了！谢谢你，我刚刚开始学习这些东西，所以一点点通知，但我相信在适当的时候我会得到它的挂钩。谢谢你：D – 2014-08-28 15:27:43

别担心。知道什么CSS属性从流中取元素。还有更多，学习它们会帮助你很多 – 2014-08-28 15:29:48

裹.bottomcenter在容器格即全宽，然后添加text-align: center到包装DIV：

<div class="bottomcenterwrap"> 
    <div class="bottomcenter"> 
    ... 
    </div> 
</div>

和

.bottomcenterwrap 
{ 
    text-align: center; 
    width: 100%; 
} 

.bottomcenter 
{ 
    ... 
    margin: 0 auto; 
}

然后加入position: fixed到包装

来源

2014-08-28 15:09:02 Luke

如何使这个代码中心即使两个边距设置为自动？

回答

相关问题