將div與第一個垂直居中的div對齊

我有一個頁面，我按照它們所屬的類別並排顯示圖像，每個圖像數組以它所屬的類別開頭。圖片的高度差異在&之間，但放入絕對高度爲330px的div中。將div與第一個垂直居中的div對齊

CSS：

.front-index { 
margin: 0 1em 0 2em; 
} 

.front-work { 
    margin: 0 2em 2em 0; 
    display: table; 
    width: 66px; 
    position: relative; 
    height: 330px; 
    background-color:#f0f0f0; 
} 

.front-work img { 
    margin: .3em 0 .3em 0; 
} 

.wraptocenter { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

.wraptocenter * { 
    vertical-align: middle; 
} 

.front-index, 
.front-work { 
    float: left; 
}

HTML：

<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div> 


    <div class="front-work"> 
     <div class="wraptocenter"> 
      <img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/> 
     </div> 
    </div> 

    <div class="front-work"> 
     <div class="wraptocenter"> 
      <img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/> 
     </div> 
    </div> 
…

的jsfiddle：http://jsfiddle.net/rCAKa/9/

我想文本在同一行對齊作爲第一圖像正確的。

我想到的是，這可能是這應該在jQuery中完成。 IE瀏覽器。以某種方式測量從.front-work div內部頂部的圖像距離，然後將該值作爲內聯代碼（top：whatever px）分配給.front-index div。

也許有人會遇到這樣的問題，並且知道解決這類問題的方法嗎？ CSS或JS。

來源

2013-02-23 r1987

哪裏是黃色圖像？ – 2013-02-23 12:52:33

在我的愚見，我不認爲你在做什麼，通過CSS是可能的 - 它需要一些簡單的JavaScript掛羊頭賣狗肉，因爲你必須知道的第一圖像的相對位置（從容器的頂部）在右邊爲了定位文本 - CSS不是完全爲此設計的。

在JS的策略是：

遍歷要定位
取的垂直上方的第一圖像的向右偏移與文本中的每個元件（相對於含親本）

將頂部填充匹配設置爲圖像的頂部位置。或者，您可以設置子元素的頂部位置，填充或邊距，或重新定位文本的其他方式。

$(document).ready(function() { 
    $(".front-index").each(function() { 
     var fromTop = $(this).next().find("img").position().top; 
     $(this).css({ 
      "padding-top":fromTop 
     }); 
    }); 
});

我已付出你的小提琴，你可以看到它在這裏的行動 - http://jsfiddle.net/teddyrised/LT54V/1/

P/S：在一個相關的說明，.wraptocenter * { }可能不是最好的（如，最高效的）選擇器，因爲如果元素中有許多子元素（誰可能或可能有更多子元素），那麼CSS將不得不迭代遍歷所有元素。相反，嘗試使用.wraptocenter > * { }或只是.wraptocenter img { } :)

來源

2013-02-23 12:40:53 Terry

JEAH！這是我以後的事情。我認爲這是一個jQuery的解決方案，但我知道它是壞的。感謝CSS提示也。獎勵！ – r1987 2013-02-23 14:09:32

我意識到你已經爲圖像設置了0.3em的頂部和底部邊距，這就是爲什麼文本沒有完全排列。您可以將marginTop值添加到jQuery中的fromTop變量中，或者在沒有圖像邊距的情況下添加:) – Terry 2013-02-23 14:46:28

我第一次嘗試使用CSS來解決這個問題。過了一會兒，我想通了以下邏輯：

具有相同的高度上設置爲表顯示正確的
製作一個表格單元格中的第一個是中心細胞創建一個div垂直
在這個div做與圖像高度相同的另一個細分。

的HTML代碼則是：

<div class="front-index"> 
    <div class="front-index-inner"> 
     <div style="height:250px;"> 
      <p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p> 
     </div> 
    </div> 
</div>

和我的CSS部分原因：

.front-index { 
    margin: 0 1em 0 2em; 
    display: table; 
    height: 330px; 
    overflow: hidden; 
} 
.front-index-inner { 
    display: table-cell; 
    width: 100%; 
    vertical-align: middle; 
}

你可以看到結果在這裏：http://jsfiddle.net/rCAKa/10/

我希望這爲您提供了一個清晰，可理解且有用的解決方案。

問候，

傑夫

來源

2013-02-23 13:09:05 JohannesB

Helo Jef。謝謝你的回答，它適用於第一個。但是我在解決方案之後，對於兩種文本都適用，所以泰迪的答案是正確的。 – r1987 2013-02-23 14:08:19

http://jsfiddle.net/rCAKa/11/編輯它的第二個文本，也使用完全相同的工作方法。 – JohannesB 2013-02-23 21:21:36

將div與第一個垂直居中的div對齊

回答

相關問題