float：left，keep other element text-align：center

Question

前段時間我問了一個關於how to align some content on the left, some content in the middle, but keep them vertically aligned的問題。

通過我收到的答案和一些進一步的搜索，我已經想出了兩個幾乎完美的解決方案。但我想知道是否有某種方法可以將它們組合成滿足我所有要求的解決方案。

這些要求是：

• 寬度或高度的無硬編碼
• 一些內容左對齊，某些內容對準中心與每個
• 左對齊和中心對齊內容垂直排列的在父其他
• 兩個左和中心對準的內容服從填充（或父的父）
• 沒有不必要的滾動
• 中心對齊內容不得被允許與左對齊的內容（不通過溶液＃1成立）重疊
• 中心對齊內容必須是真正中心
• 與IE 8兼容（未通過溶液＃2成立）
• 編輯：如果居中內容很寬，它必須用盡所有可用空間（即直到它碰到左對齊的內容）

在這些要求中，重疊的內容是我最願意忍受的內容，因爲它只會在窗口變得非常小的時候纔會發生。

解決方案＃1 - 使用position: absolute; left: 0，＆＃x2713;真正居中，＆＃x2717;沒有重疊

.nav-btn-set-left { 
 
    position: absolute; 
 
    left: 0; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
} 
 

 
.title-bar { 
 
    padding: 5px 10px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: lightblue; 
 
    font-size: 50px; 
 
} 
 

 
.nav-btn-set-parent { 
 
    border: 1px solid orange; 
 
    position: relative; 
 
} 
 

 
.nav-btn { 
 
    vertical-align: middle; 
 
}

<div class="title-bar"> 
 
    <div class="nav-btn-set-parent"> 
 
     <div class="nav-btn-set-left"> 
 
      <input type="button" value="Button1" class="nav-btn"/> 
 
      <input type="button" value="Button2" class="nav-btn"/> 
 
     </div> 
 
     Heading 
 
    </div> 
 
</div>

溶液＃2 - 使用float: left;，＆＃x2717;真正居中，＆＃x2713;沒有重疊

.nav-btn-set-left { 
 
    float: left; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
} 
 

 
.title-bar { 
 
    padding: 5px 10px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: lightblue; 
 
    font-size: 50px; 
 
} 
 

 
.nav-btn-set-parent { 
 
    border: 1px solid orange; 
 
    position: relative; 
 
} 
 

 
.nav-btn { 
 
    vertical-align: middle; 
 
}

<div class="title-bar"> 
 
    <div class="nav-btn-set-parent"> 
 
     <div class="nav-btn-set-left"> 
 
      <input type="button" value="Button1" class="nav-btn"/> 
 
      <input type="button" value="Button2" class="nav-btn"/> 
 
     </div> 
 
     Heading 
 
    </div> 
 
</div>

任何人都可以找到一種方法來統一這兩個，以滿足所有要求的辦法？或者，沒有較新的CSS是不可能的？如果你有一個像flex-box這樣的新CSS的解決方案，它不適用於舊版瀏覽器，那還是值得一提的。

Answer 1

如果可以稍微調整標記即可。

http://jsfiddle.net/2gddfxbo/

.nav-btn-set-parent { 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    padding: 20px 0; 
 
} 
 
.heading-cell { 
 
    text-align: center; 
 
}

<div class="title-bar"> 
 
    <div class="nav-btn-set-parent"> 
 
     <div class="table-cell nav-btn-set-left"> 
 
      <input type="button" value="Button1" class="nav-btn"/> 
 
      <input type="button" value="Button2" class="nav-btn"/> 
 
     </div> 
 
     <div class="table-cell heading-cell">Heading</div> 
 
     <div class="table-cell"></div> 
 
    </div> 
 
</div>

而且如果有必要補充一點：

.heading-cell { 
    text-align: center; 
    width: 50%; /*adjustable*/ 
}