html - CSS3 : Center Text (content) in div:before

Question

我写了一些代码来创建带有一些文本的中转站。现在我有两个问题:

1) 我想将文本居中。 2) 我想让中途停留成为一个链接。

本人是CSS新手，希望大家多多指教!

最好的问候!

.hover_div {
    position:relative;
    width:200px;
    height:200px;
}
.hover_div img {
    width:100%;
    vertical-align:top;
}
.hover_div:after {
    content: "";
    position: absolute;
    width:100%; height: 100%;
    top: 0; left: 0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.hover_div:before {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index: 1;
}
.hover_div:hover:after {
    opacity:1;
}

.hover_div:hover:before {
    opacity:1;
}

<div data-content="Elektro" class="hover_div">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

Answer 1

我已经在以下 JSFiddle 中更新了您的代码:https://jsfiddle.net/rvxo7fn5/

我已将以下行添加到 :before :

text-align:center;
width: 100%;
margin-top:50%;
transform: translateY(-50%);

基本上，text-align: center;当然，文本水平居中。但是，absolute定位的 div 没有宽度，这就是我添加 width: 100% 的原因.接下来，您需要将其垂直居中。 margin-top: 50%;将 div 移动父 div 高度的 50%。 transform: translateY(-50%)将 div 向后移动 div 本高度度的 50%。这会将它对齐在父级的中心。 (父高度的 50% - 子 div 高度的 50%)。

您还提到希望它成为一个链接。这可以通过简单地替换 <div> 来实现。用<a>并添加 display: block;给你的.hover_div类(class)。这赋予它 div 也具有的属性。

希望对您有所帮助!