如何居中水平
回答
使用width:100%
绝对div
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
width:100%;
}
更新fiddle
我只是忘了“宽度:100%”。非常感谢你:) – MehmetDemiray 2014-09-05 12:14:06
很酷,在这里完成.. – 2014-09-05 12:21:03
试试这个:
HTML代码:
<div class="home">
<div class="center">
<a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
</div>
</div>
CSS代码:
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
}
.arrow {
}
'position:fix;'哈??!我想你的意思是'固定'。 – 2014-09-05 10:57:21
。家是相对的。它必须绝对定位。我解决了问题。谢谢 :) – MehmetDemiray 2014-09-05 12:09:08
这应该工作,试试吧。
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto;
max-width: 960px;
}
.center {
position: relative;
bottom: 0;
top:30px;
text-align: center;
}
.arrow
left: 0;
right: 0;
至于为什么它的工作原理的解释:很好,包装DIV必须是绝对的,其含量必须是相对于定位是什么包装里面,你please.In这种方式,会更容易如果你要添加的另一个相对的div
这里工作的例子。您可以删除.arrow CSS规则,因为它什么都不做。
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
width: 100%;
bottom: 0;
top:30px;
text-align: center;
}
我刚刚更改为您的CSS,它工作正常。
.home {
margin: 0 auto;
}
.home .center {
margin: 0 auto;
text-align: center;
}
.arrow
margin: 0 auto;
}
干杯!
- 1. 如何水平居中JSpinner
- 2. 水平居中水平ItemsControl
- 3. 水平居中
- 4. 居中水平UL
- 5. FXML如何水平居中图像
- 6. 如何居中水平导航栏
- 7. 如何垂直和水平居中DIV?
- 8. 如何水平居中浮动文字
- 9. 如何水平居中拆封DIV
- 10. 如何绘制水平线并居中?
- 11. 如何水平和垂直居中div?
- 12. 如何居中div的水平线?
- 13. CSS如何水平居中一个div
- 14. 水平居中图像
- 15. as3水平居中图像
- 16. CSS响应水平居中
- 17. 水平居中浮动div
- 18. 居中水平导航栏
- 19. Android:水平居中gridview
- 20. SmartGWT:水平居中HTMLFlow
- 21. 居中图像div水平
- 22. 水平居中浮动框
- 23. css水平居中图像
- 24. 如何将此div垂直居中以及水平居中?
- 25. 如何将居中的水平recyclerview居中?
- 26. 不能水平居中水平切换集
- 27. 在GridPane中水平居中行JAVAFX
- 28. 在IE8中水平居中的div
- 29. 在flexbox列中水平居中文本
- 30. 在UITableViewCell中水平居中两个UILabel
请在问题本身*你的代码*。的 – gvee 2014-09-05 10:51:24
可能重复[如何垂直居中一个div所有的浏览器?(http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – gvee 2014-09-05 10:52:15
移动'左:0;正确:0;'对绝对定位的父div。 – 2014-09-05 10:53:02