CSS3：divの中のテキスト（コンテンツ）：

Question

いくつかのテキストでレイアオーバーを作成するコードを書きました。今私は2つの問題があります：

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自体の高さの50％をdivに戻します。これにより、親の中心に揃えられます。 （親の高さの50％ - 子供の高さの50％）。

あなたはまた、それがリンクであることを望んでいると述べました。これは、単に<div>を<a>に置き換え、display: block;を.hover_divクラスに追加するだけで実現できます。これはdivにもあるプロパティを与えます。

希望に役立ちます！

Answer 2

更新：以下のようにスタイルを合わせます。

.hover_div:hover:before 
{ 
    opacity:1; 
    width:100%; 
    text-align:center; 
    text-decoration:underline; 
    cursor:pointer; 
} 

Answer 3

あなたはそれが<a>で<div>を交換することによってリンクすることができます。

.hover_div { 
 
    position:relative; 
 
    display: block; 
 
    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; 
 
    text-align: center; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
} 
 
.hover_div:hover:after { 
 
    opacity:1; 
 
} 
 

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

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

Answer 4

テキストはleft: 50%; top: 50%; transform: translate(-50%, -50%)を添加することによってセンタリングすることができます。

のような疑似要素：afterと：beforeはDOMからアクセスできません。だから、それからリンクを作ることはできません。

.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; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.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 5

.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; 
 
    text-align:center; 
 
    height:100%; 
 
    width:100%; 
 
    padding-top:50%; 
 
} 
 
.hover_div:hover:after { 
 
    opacity:1; 
 
} 
 

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

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