如何浮動兩個錨鏈接，水平和垂直對齊文本？

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

如何浮動兩個錨鏈接，水平和垂直對齊文本？

回答

相關問題