Question

所以我定制了我的tumblr并且我的分页不合适。我将分页div放在内容div中，以便它应垂直对齐在页面的底部中心。但是分页div（较旧和较新的按钮）一直出现在左下角而不是底部中心。我尝试将边缘div与边距居中：auto并且由于某种原因它似乎被卡在左下角。

HTML：

<div id="content">
<div id="page">    
<div class="pagination">
{block:NextPage}<a href="{NextPage}"> ←OLDER </a>{/block:NextPage}</div>
<div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}"> NEWER→ </a>{/block:PreviousPage}</div>
</div>

的CSS：

#content .pagination{margin:0 auto;
background-color:blue;
color:white;
border-radius:15px;
font-size:20px;
font-family:broadway;
}

#content .pagination a{margin:0 auto;
                   color:white;
                   opacity:.5;
                   }
#content .pagination a:hover {
                          color:white;
                          opacity:1.0;
            filter:alpha(opacity=100);
                         }
#content #page .pagination {
                        display:inline-block;
                        }

Answer 1

您需要设置

#page {
    text-align: center;
}

如果你能够改变html标记，你可以这样做你的分页：

<div class="pagination-wrapper">
    <div class="pagination">
        {block:NextPage}<a href="{NextPage}"> ←OLDER </a>{/block:NextPage}
    </div>
    <div class="pagination">
        {block:PreviousPage}<a href="{PreviousPage}"> NEWER→ </a>{/block:PreviousPage}
    </div>
</div>

和

.pagination-wrapper {
    text-align: center;
}

Div位置（保证金：自动）

1 个答案: