CSS - 圖片和長文本沒有表的垂直對齊

好吧，我知道這裏有很多關於這個的問題，應該是重複的，但老實說，我讀了很多，每個都有它特定情況/標記 - 並且仍然無法正確...CSS - 圖片和長文本沒有表的垂直對齊

我有一個小圖像，可能在一個窗口小部件區域有長文本。我需要做一個居中對齊，而當文字比圖像更高，還有要對準中心（即使「高」，則圖像） -

我尋找一個通用的解決方案跨瀏覽器和不表

編輯我

答案的更新後 - 我迷迷糊糊地修改就可能的黑客（jQuery的）

什麼這個腳本會做實際上是包裹在表格標記有問題的元素 - 因而它們轉換爲IE實際表..

因此，假如我們有

.table  { display: table; } 
.trow { display: table-row; } 
.tcell { display: table-cell; }

我們這樣做：

$(document).ready(function(){ 
    if ($.browser.msie && $.browser.version == 7) 
    { 
    $(".tcell").wrap("<td />"); 
    $(".trow").wrap("<tr />"); 
    $(".table").wrapInner("<table />"); 
    } 
});

把上面的腳本與biziclop提供的解決方案 - 使它適用於我的測試...

Edi噸II

@biziclop溶液VR2完美地工作，從而使我的編輯我過時（或至少不是必需的）

來源

2012-06-23 Obmerk Kronen

OP在我刪除的答案的評論中說，該解決方案需要IE6/7的支持。 – biziclop

OP也表示這是OQ（跨瀏覽器） - 但再次感謝努力和嘗試:-) –

可能的重複[如何垂直對齊CSS圖像旁邊的文本？]（http：// stackoverflow /謝謝你的答案，它看起來好多了 - 事實上，我已經嘗試過這個解決方案（我的問題/ 489340/how-do-i-vertical-align-text-next-to-an-image-with-css） –

V1：使用表小區

http://jsfiddle.net/as8xW/4/

要使用table-cell，我不得不把span包裝在img左右，因爲即使沒有table-cell ing也可以改變圖像大小以匹配其他單元。

li: table-row 
    span: table-cell, vertical-align:middle 
    img 
    a: table-cell, vertical-align:middle

V2：使用內聯塊，一些固定的寬度，可與IE6

http://jsfiddle.net/as8xW/10/

li: block: FIXED WIDTH 
    span: inline block (with IE treatment) 
    img 
    a: inline block with FIXED WIDTH not to drop below the image

來源

2012-06-23 07:36:18 biziclop

或類似的）之前..但A） - 是的，不幸的是我需要IE6和以上，B） - 即使你的解決方案看起來好多了 - 圖像仍然對齊到標題的頂部（或頂部的標題圖片）當文本很長.. –

感謝您的更新 - 它仍然沒有去IE <8。但看到我的更新爲可能的黑客... –

微軟自己甚至不支持IE6了。如果只有世界其他地方會讓它死亡！ – Bojangles

你可以試試這個

HTML：

<div class="sidebar-box"> 
    <ul> 
     <li> 
      <div class="left-col"> 
       <img src="http://placehold.it/50x50" height="50" width="50"> 
      </div> 
      <div class="right-col"> 
       <a href="http://localhost/wp-sandbox/?p=283" title="Results Photography"> 
        Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography 
       </a> 
      </div> 
     </li> 
    </ul> 
</div>

CSS

.sidebar-box { 
    margin-bottom: 20px; 
    float: left; 
    width: 45%; 
} 

.sidebar-box img { 
} 

.sidebar-box li { 
    margin: 0; 
    display: block; 
    overflow: hidden; 
    zoom: 1; 

} 

.left-col { 
    display: table-cell; 
    vertical-align: middle; 
    _float: left; 
    *float: left; 
    width: 65px; 
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px'); 
} 
.right-col { 
    display: table-cell; 
    vertical-align: middle; 
    _float: left; 
    *float: left; 
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px'); 
}

撥弄鏈接http://jsfiddle.net/cKmQ9/但它可以在錯誤的小提琴事業IE6，更好地嘗試在新的文檔。

來源

2012-06-23 08:45:26 yarm

CSS - 圖片和長文本沒有表的垂直對齊

回答

相關問題