如何浮动两个锚点链接，水平和垂直对齐文本？

Question

这是我为实现更好的解释而努力实现的形象

我正在处理的是：

• 有2个锚链接相互浮动。
• 内部的两个锚点内容或单词数量各不相同。该 anchor是我的wordpress博客的下一篇和上一篇文章。请 参考 http://codex.wordpress.org/Function_Reference/previous_post_link和 和http://codex.wordpress.org/Function_Reference/next_post_link 参考
• 两者都有相同的尺寸（高度和宽度）。高度会根据其他锚点的内容自动调整。
• 中间有一条边界线。
• 文字应垂直和水平对齐。

You can see the live example of what I'm trying to copy for better explanation

Here's my code and fiddle

<div class="holdmetight">
    <div class="prev"><a href="/">TITLE OF PREVIOUS POST HERE</a></div>
    <div class="next"><a href="/">TITLE OF NEXT POST HERE</a></div>
</div>

.holdmetight {width:100%; max-width:1023px; position:relative; display:block; }
.next, .prev { min-height:35px; height:100%; text-align:center; height:100px;}
.prev { display:block; background:#CCC; width: 100% auto; }
.next {float:left; border-right:1px solid #eceff0; background: #AAA;}

Answer 1

以下是display: table的基本布局。

display: table的好处：

• 使用vertical-align: middle

轻松将文字垂直居中

• 两个div都根据其他内容保持相同的高度

Have an example!

HTML / CSS

＆＃13;

＆＃13;

.holdmetight {
    display: table;
    border: solid 1px #000;
    border-top: solid 2px #000;
}

/* the > selector targets direct div children of .holdmetight */
.holdmetight > div {
    display: table-cell;
    vertical-align: middle;
    background: #aaa;
    padding: 10px;
    text-align: center;
    width: 50%;
}
.prev {
    border-right: solid 1px #000;
}

＆＃13;

<div class="holdmetight">
    <div class="prev">
        <a href="/">
          TITLE OF PREVIOUS POST HERE.
          This is a particulary long title 
          that will push both divs down.
        </a>
    </div>
    <div class="next">
        <a href="/">
          TITLE OF NEXT POST HERE
        </a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;   

Answer 2

DEMO

    .holdmetight {width:100%; max-width:1023px; position:relative; display:block; }
.next, .prev { min-height:35px; height:100%; text-align:center; height:100px; display:inline-block;}
.prev { background:#CCC; width: 100% auto; }
.next { border-right:1px solid #eceff0; background: #AAA;}

根据需要添加填充