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;
}

图像/悬停/文本不居中

1 个答案: