如何居中水平

问题描述：

我使用的字体真棒库的绝对股利内容。我想把水平居中箭头图标。并且DIV必须是绝对的位置。如何居中水平

我用这个代码，但它不工作。

.arrow { 
    left: 0; 
    right: 0; 
}

JSFiddle Demo

请在问题本身*你的代码*。的 – 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

答

使用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;  
}

干杯！

相关推荐