div内的两个div看起来不正确

Question

我有一个容器div和两个div。

我试图将两个div的内容对齐，但由于某种原因，第二个div与第一个div相比看起来不正确。

第一个内部div对齐如下：

            int tmp = arraylist.get(i);
              arraylist.set(i,arraylist.get(j)) ;
              arraylist.set(j,tmp);

第二个内部div对齐如下：

.main-text {
position: absolute;
text-align: center;
color: red;
top: 20%;
width: 100%;
letter-spacing: .6em;
}

完整代码，演示第二内部div如何与内容＆＃34; DWN＆＃34;看起来：http://jsfiddle.net/qbmtap7t/

不确定我做错了什么，谢谢

Answer 1

您需要将position班级的top和.bottom指令移至.down-arrow，这是底部文字的实际容器：

.down-arrow {
  width: 100%;
  position: absolute;
  top: 50%;
  text-align: center;
}

请参阅Fiddle

Answer 2

使用Css选择器：尝试编辑您的Css类.down-arrow，如下所示：

.down-arrow .bottom {
  text-align: center;
  width: 100%;
}

参见演示：

http://jsfiddle.net/qbmtap7t/3/

希望它有所帮助。

Answer 3

您申请的样式.bottom，将其应用于.down-arrow，它会起作用。此外，你似乎有很多html结构只是为了一个简单的链接，任何特定的原因使用跨锚内？作为最佳实践，请尽量避免不必要的标记。