css - 图像/悬停/文本未居中

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 站在中心。

另外改下面的csstext-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;
}