垂直對齊在同一行上的照片

有沒有什麼辦法在這種情況下垂直對齊與CSS的照片？我試着添加垂直對齊，但它不適用於div。垂直對齊在同一行上的照片

enter image description here

<html> 
<head> 

<style type="text/css"> 
.imageWrapper { 
    margin: 1em; 
    float: left; 
/* vertical-align: middle; */ 
} 

.imageTitle { 
    text-align: center; 
} 

.row { 
    float: left; 
} 

#albumList { 
    width: 600px; 
} 
</style> 

</head> 
<body> 
<div id="albumList"> 

    <div class="row"> 
     <div id="w1" class="imageWrapper"> 
      <img src="1.jpg" width="150px"/> 
      <div class="imageTitle">Title1</div> 
     </div> 

     <div id="w2" class="imageWrapper"> 
      <img src="2.jpg" width="150px"//> 
      <div class="imageTitle">Title1</div> 
     </div> 

     <div id="w3" class="imageWrapper"> 
      <img src="3.jpg" width="150px"//> 
      <div class="imageTitle">Title3</div> 
     </div> 
    </div> 

    <div class="row"> 
     <div id="w4" class="imageWrapper"> 
      <img src="4.jpg" width="150px"/> 
      <div class="imageTitle">Title1</div> 
     </div> 

     <div id="w5" class="imageWrapper"> 
      <img src="5.jpg" width="150px"//> 
      <div class="imageTitle">Title1</div> 
     </div> 
    </div> 

</div> 
</body> 
</html>

[這是我試過] 我可以用jQuery做，但添加在飛行了一些照片和錯誤處理程序（image_not_available.jpg）增加了一些，所以這種做法太硬申請。

var maxHeight = 0; 
var maxID = 'nothing'; 
$('.imageWrapper').each(function(i){ 
    var height = $(this).height(); 
    if(height > maxHeight) { 
     maxHeight = height 
     maxID = $(this).attr('id'); 
    } 
}); 

$('.imageWrapper').each(function(i){ 
    var id = $(this).attr('id'); 
    if(id != maxID) { 
     var minus = maxHeight - $(this).height(); 
     $(this).css('margin-top', minus/2); 
    } 
});

來源

2011-05-19 Emerald214

看右邊>有100萬例上如何在CSS中垂直對齊。 – 2011-05-19 11:07:38

#albumList { 
    display: table; 
} 

.imageWrapper { 
    display: table-cell; 
    vertical-align: middle; 
    height: 350px; /* for example, guess you have to specify it */ 
}

來源

2011-05-19 11:13:53 jibiel

這正是我想要的。非常感謝你！ – Emerald214 2011-05-20 16:24:57

先生，你是男人。就這些。 – PhillipKregg 2013-09-25 14:55:05

可能剛纔設置的行高一樣div.row

的高度

.row { 
height: 200px; 
line-height: 200px; 
}

來源

2011-05-19 11:10:58

要在您需要使用display屬性table-cell一個div使用垂直對齊。

這裏有一個例子： HTML -

<ul> 
<li class="item"> 
     <img src="http://placekitten.com/50/150" alt="Little kitten"> 
</li> 
<li class="item"> 
     <img src="http://placekitten.com/100/60" alt="Little kitten"> 
</li> 
<li class="item"> 
     <img src="http://placekitten.com/100/160" alt="Little kitten"> 
</li>

CSS -

.item{ 
    width: 200px; 
    height: 200px; 
    display: table-cell; 
    vertical-align: middle; 
}

希望這是你在找什麼。

來源

2011-05-19 11:16:47 igneosaur

vertical-align僅應用於內聯元件（或多個元件在表格單元格），因此使用display: inline-block代替float: left由側和圖像側的位置，然後垂直對齊將工作：

.imageWrapper { 
    margin: 1em; 
    display: inline-block 
    vertical-align: bottom; 
}

來源

2011-05-19 11:18:39 RoToRa

最佳答案我已經找到了

#footer-widgets .widget { 
    display: inline-block; 
    float: none; 
    vertical-align: middle; 
}

Source

來源

2017-03-30 17:39:39 Kyle

垂直對齊在同一行上的照片

回答

相關問題