圖片/懸停/文字不居中

Question

在我的頁面上，我有一排圖像，懸停屬性顯示文字。但是，圖像不居中。這似乎是一個div問題，可能與我的大型機div有衝突，但我不確定。

任何人都可以發現問題嗎？

CSS

#mainframe { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 80%; 
} 

#mainwrapper { 
    font: 10pt normal Arial, sans-serif; 
    text-align: center; 
} 

#mainwrapper .box { 
    height: 120px; 
    width: 120px; 
    position: relative; 
    float: left; 
    cursor: pointer; 
} 

#mainwrapper .box img { 
    position: absolute; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

#mainwrapper .box .caption { 
    background-color: rgba(0,0,0,0.7); 
    position: absolute; 
    color: #fff; 
    z-index: 100; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { 
    opacity: 0; 
    width: 120px; 
    height: 120px; 
    text-align: middle; 
    padding: 0px; 
} 

#mainwrapper .box:hover .fade-caption { 
    opacity: 1; 
} 

Answer 1

在#mainwrapper刪除text-align: center;從而使中心的整個DIV的立場。

也改變了下面的CSS text-align: middle;是錯的應該是center

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { 
opacity: 0; 
width: 120px; 
height: 120px; 
margin: 0px auto; 
text-align: middle; // change it center 
padding: 0px; 
}