html - 如何 float 两个 anchor 链接，水平和垂直对齐文本？

Question

为了更好地解释，这是我试图实现的图像

我正在处理的是:

• 有 2 个相互 float 的 anchor 链接。
• 两个 anchor 的内容或里面的字数各不相同。这anchor 是我的 wordpress 博客的下一篇和上一篇文章。请引用 http://codex.wordpress.org/Function_Reference/previous_post_link和和 http://codex.wordpress.org/Function_Reference/next_post_link为了引用。
• 两者具有相同的大小(高度和宽度)。高度会根据其他 anchor 的内容自动调整。
• 中间有一条边界线。
• 文本应垂直和水平对齐。

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

.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;
}

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