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

enter image description here

我处理什么形象是：

有2个浮动相互锚链接。
这两个锚点的内容或其中的单词数量是不同的。锚是我的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。

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

来源

2014-09-20 Kareen Lagasca

这里填充是一个基本的布局与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>

来源

2014-09-20 08:01:27 misterManSam

这是完美的！我已经尝试添加一个非常长的内容，它的作品完美！ http://jsfiddle.net/bendaggers/wn2aznxt/16/ – 2014-09-20 08:08:24

@KareenLagasca - 很高兴听到:)'display：table'并不总是得到它应得的认可。它可以非常有用！ – misterManSam 2014-09-20 08:10:46

当然，（CSS）表格有其自身的缺点。小心使用它们。 – 2014-09-20 08:20:43

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

添加根据需要

来源

2014-09-20 07:54:26 himanshu

我编辑我的小提琴。你能再看看吗？并且锚内的文字应该在中间（水平和垂直对齐）。 – 2014-09-20 07:58:06

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

回答

相关问题