Question

以下代码更改悬停时的图像/文字并正常工作。但是我需要文本（位于内容:)位于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

如果您知道您的内容将始终保持在一行，则可以安全地使用行高（设置高度的行高）。

Answer 2

以下是两个解决方案，一个使用flexbox浏览器支持（http://caniuse.com/#feat=flexbox），另一个使用表，应该在任何地方都支持：https://jsfiddle.net/k95shxfL/4/

<div class="flexbox-vertical-middle">
  <div>
    Service Description
  </div>
</div>

<div class="table-vertical-middle">
  <div class="table-cell">
    Service Description
  </div>
</div>

.flexbox-vertical-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-vertical-middle {
  display: table;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}

更改CSS内容的位置

2 个答案: