使用CSS在div中進行圖像垂直對齊

Question

腳本

我正在嘗試使用表格單元格方法（ '6種使用CSS垂直居中的方法 '@Vanseo Design）在div垂直對齊img ：

<style>
    .container{border: solid 1px #000;display:table;}
    .contentItem{display:table-cell;vertical-align:middle;}
    .contentImg{float:left; width: 50px; margin: 3px;}
    .contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
</style>
<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="tv1.gif"/>
        <div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div>
    </div>
</div>

問題

它根本行不通。 這是一個（不是）runnig jsFiddle 示例 。

事實

• 我正在使用Chrome
• 圖片寬度必須設置為固定值（例如50px）
• 圖像高度是可變的，在加載圖像之前未知
• 無法刪除contentDiv div標簽。 實際上，它包含具有動態數據的復雜結構，而不是簡單的文本。

Answer 1

嘗試這個

<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="data:image/gif;base64,R0lGODlhJAAaAPf/ADdqhGBeXheC1CMhJRB1xAVwwmC55zqSz2fI+cXGxiiDySmJzAEAACN5vFOk1xYhKlaWt0ac0glww1Wl1RYcIpGSlayqqmG87Uqh1RcWGhZGdDY3OAlHh7m7vB1+xzeMzVar2AQAAAZv0AhHiBV/yFSr2CknKy0rKw1swTeQzCWEya6trAYAAF+66DWNzRp5xWBjZkGX0CyJzDWS0Adv0AoCBBx5xhB1w1qjySJ/xwYNFSmCwOLi4S2U3q6tq4KBg5qbniaJzAZvzwVswQRzy0GX0Uac0QZ201WVtiNVejItLQlswQdGh0eb0Rx6xw4ZKECX0BgeJBYeJF5eXViq2UhISQ51xAM9cTKNzZKUlyQjKJOVmFWWtxIeKB14xEqh1Euh1Q0ZJjiS0BgcJFRWVaqppyIfJSYkKkGVzjmNzt7f3laVtxFswKeoqiGEyR5/yBp+xwprwQZFiLGztRcdIxp+yEqg1C4rLAwWJRkfJiYlKScnK/P19Qtswkqi1TSNzkSc0qqqqYmLjleWuAhuwiQlKEec1B56xpeZm5CRlP///+rs6yuDyiWDyJ2eoQhuzlSr2UKX0C4sLkCX0T+W0Ahv0IiIigdswlOl16SkqCwsMObp6YuMjyKDyVey5CuO1m1vcQxmtQpEfoaHigAkS1Wo1g91wzCIy11fYwp54ydafAhLkZWWlFWj0lar2S5WbSqJy6qrrQ8bJxYbIhRwuCAdI46QkjSMyicnLS1igEyo3uXn5y+HyTqY2tDR0lOr2VmdvxBzwkej3VWVtEmf0c/Q0VaVtUWVxjaS1w8HCkmZyQkIDEmg1Eqi1kqh12JfX0Kd2jSOzUpMUBp6yHN2dTuMwx1+zziGwR55xR55xh56xSCF2CaJ07/AvyCL2lSOrStfflis30ug1G9wc0WbzoiJhkGW0EGh5Ein5E6s6AdvvkCPwwprvRpOdw56zVyv2gtptwVz2Qd71VOeyoyMjz2b4ApswBoeJDaNzQdwwwdAelOy6w1BcV627CUnK////yH5BAEAAP8ALAAAAAAkABoAAAj/ABPEKkOQoIWDCA/6WLFwhUOHC31ETBhoDowMtWqZMTNggJaPWvSINEGypIk9JnDtOaPnjJaOZrRk2BBAh6gRTDjoHLFzBE+cPnlyAKqTiVGjclaROvEsTJx4j0TQECGVhhAaU6VWkipEiNasIiphpZFKn5JneEIJYYfi0hAUS96yQREnDpu5Sy71sXep7RIUff4uIXTkylk88Iiok5Avn4QCBSRIJkRI8mPHjxljLpAPsjzDTWm5C0aAwA0CpkybtmI6denXsG/cMHVaAL+zYRpY8+LEBjZtL5y88G3DSTYbwQ/ZUG5jufDmNqZt06AkgKwGAjzkIPFmO4nv2t/A/xEPh4SHOh66ozdf57s3DZKsN+DGiJEKBSoYKcDv5v5+BW50sp9+/zHSCH89tHOCdTt8wsspMiywgAwUwhJEEBNOiCGFFXIooYUJ3jGFLNcgc0s0H/yBz4ou/PGBCzDi40IaaciIxR8uyLgiFh+kUU8Sd1hXTS8piHHADEaKMQOSBxyQpJFNOqnkDE1SecA5QE7RxTrQoFEEFF/GAMUkRcQQSQxlFjFJDGxGAgUUlMAZgznmFIGOKgt2cYww5ERghCGGRACoEU1E0IQRfkZgKKJ+FgqIok0Ykg44eSqjCzFgiIMBGBgw44cfGHzxBQYY2MHpqF/YQWoznJbqzD65LP/4wDzhtDLBrZhM4MCumDhwq64O9IqrrrnuGmw/AMiKgyelUPGLK65AIq20IIDgChXRgkAFFZCUQIW1kLiiLSQXJBvAA+8gYEALLazbbrvrxsuuu/DS6y4CyT4jxTfADAMBBGv8iwTA/w4CARdIcGHwvwAPgjASxiSMwyuSwLDMPXlknEcUG9PhcRQU0MFxFHRQMAsFKHtc8hh0SEFHHjpoggoDLIQQAgs426yzzTWzkEwNOjMgNM8341wDA4XMQU8WFTTNdCIVbAGEI0AgsoUg0vhThSCIAJFJG444ncUWW4xtCxD/pK322v8ssssifCjCBygDTLGJIrsk0A0PbPcu7XfaapRDxjijzNHGBjMlwgk1ZFTByt+Qr61GAsV0AIQlP2RuSQUd+NJN5P8EBAA7"/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.
    </div>
</div>

CSS

.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

如果您無法擺脫div，則只需更改CSS

.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}

Answer 2

浮動圖像時，垂直對齊不起作用。 如果從圖像中刪除浮點，然后將text div設置為inline-block元素，則對齊將起作用：

.contentImg{width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}

http://jsfiddle.net/Z8GaT/1/

Answer 3

或者簡單地：

.yourClass{
     position: relative;
     top: 50%;
     margin-top: - "the height of your image" / 2+px;
 }

請注意，如果不清楚，則邊緣上限值應減去圖像的高度除以2。

Answer 4

請在這里查看演示

去掉

.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

可能這可以解決您的問題:)。