水平對齊表格單元格

Question

我有一個表格單元格我試圖水平和垂直對齊，但我只是設法讓1工作，這就是垂直對齊。

的圖像沒有固定的大小，因此它必須是液體，並具有最大高度，寬度工作...

CSS

.prod-img { 
    display: block; 
    margin: 20px; 
    border:1px solid black; 
} 
.prod-img a { 
    max-width: 170px; 
    height: 150px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.prod-img img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    max-height: 100%; 
    max-height: calc(100% - 30px); 
    margin: 0 auto; 
} 

http://jsfiddle.net/mjx4xvgj/1/

Answer 1

使用正確display ：

• 使用margin: auto和display: block爲<a>。
• 使用display: inline-block爲<img />

代碼：

.prod-img { 
    display: block; 
    margin: 20px; border:1px solid black; 
    text-align: center; 
    vertical-align: middle; 
} 
.prod-img a { 
    max-width: 170px; 
    height: 150px; 
    line-height: 150px; 
    display: block; 
    vertical-align: middle; 
    margin: auto; 
} 
.prod-img img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    max-height: 100%; 
    max-height: calc(100% - 30px); 
    margin: 0 auto; 
    vertical-align: middle; 
} 

前瞻：

小提琴：http://jsfiddle.net/1zLLasfw/

Answer 2

使用這種風格可以幫助你

.prod-img { 
    border: 1px solid #000000; 
    display: table; 
    margin: 20px; 
    width: 100%; 
} 
.prod-img a { 
    display: table-cell; 
    height: 150px; 
    max-width: 170px; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 3

只是下面改變你的CSS，你有你的輸出： -

.prod-img { 
    display: table; 
    margin: 20px; border:1px solid black; 
    width : 100%; 
} 
.prod-img a { 
    max-width: 170px; 
    height: 150px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.prod-img img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    max-height: 100%; 
    max-height: calc(100% - 30px); 
    margin: 0 auto; 
} 

它可以幫助你。