Question

我正在使用字体真棒库。我想把水平居中箭头图标。而且DIV必须是绝对位置。

我使用此代码但它不起作用。

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

JSFiddle Demo

Answer 1

在绝对width:100%

中使用div

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
    width:100%;
}

更新了fiddle

Answer 2

这是一个有效的例子。您可以删除 .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;
}

Answer 3

试试这个：

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 {    
}

Answer 4

这应该有效，试试吧。

   .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必须是绝对的，它的内容必须相对于你所喜欢的包装内部的位置。这样，如果你想要你会更容易添加更多相对div

Answer 5

我刚刚改成了你的CSS，它运行正常。

.home {
    margin: 0 auto;
 }

.home .center {
  margin: 0 auto;
  text-align: center;
}
.arrow
   margin: 0 auto;    
}

干杯！

如何水平居中绝对div的内容

5 个答案: