html - 数据内容文本样式和定位

Question

我有一个包含数据内容的 div，用于悬停效果。它看起来像这样:

HTML:

<div data-content="TEXT THAT NEEDS TO BE POSITIONED" class="teamleft">
</div>

感谢 stackoverflow，我找到了使用 :after 和 :hover:after 使悬停效果成为可能的整洁的 css 代码。我唯一想不通的是数据内容文本的定位和样式。我想将我的文字垂直居中。另外，如何在一个数据内容中添加不同样式的文本？或者我应该使用两种不同的数据内容？

CSS:

teamleft
{
position: absolute;
width:50%;
height: 100%;
background-color: #25335a;
}
.teamleft:after
{
position: absolute;
width: 100%;
height: 100%;
content: attr(data-content);
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.teamleft:hover:after
{
opacity:1;
}

提前致谢!

JSFiddle:https://jsfiddle.net/e8t2gcxg/3/

Answer 1

试试这段代码:

.teamLeft:after {
position: absolute;
width: 100%;
height: 20px;
top:calc(50% - 10px);
content: attr(data-content);
text-align:center;
color:#fff;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

将 :after 的高度更改为 20px; 然后使用 top 并将其更改为父 div 高度的 50% -10px(:after 高度的一半)。应用 text-align:center; 使文本水平居中。

编辑

查看此链接；它应该有所帮助。

http://phrogz.net/css/vertical-align/index.html

链接来自: https://stackoverflow.com/a/2744005/3011082