html - 更改 CSS 内容的位置

Question

下面的代码在悬停时更改图像/文本并且工作正常。但是我需要文本(位于 content:) 位于 div 的中间，无论是垂直还是水平。

它已经通过 text-align: center; 水平对齐，所以我只需要它垂直对齐。有什么想法吗？

.servicecircle { 
    width: 204px; 
    height: 204px;
    background-image: url('secret.png');
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 22px;
    margin-right: 22px;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.servicecircle:hover{
    cursor: pointer;
}

.servicecircle:after { 
    width: 204px; 
    height: 204px;
    display: inline-block;
    background-repeat: no-repeat;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    /* Content is inserted */
    content: 'Service 1';
}

.servicecircle:hover:after{
    background-image: url('secret.png');
    cursor: pointer;
    content: 'Service Description..';
}

我试过 vertical-align: middle 但它没有做任何事情。

Answer 1

如果您知道您的内容将始终保持在一行中，则可以安全地使用行高(与您设置的高度相同的行高)。