我试图弄清楚如何将每个文本水平和垂直居中到其对应的图像与我目前所拥有的。
有人有什么建议吗?
这是我目前所拥有的:
<div class="content">CYREX
<input type="image" src="http://img42.com/qXPbx+" class="thumbnils" />
</div>
<div class="content">HITMAN
<input type="image" src="http://img42.com/qXPbx+" class="thumbnils" />
</div>
CSS:
.content{
width: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 0;
position: relative;
}
.thumbnils{width: 70%;}
最佳答案
将文本放在 span 中并将其添加到 css
span
{
font-size: 20px;
line-height: 20px;
position: absolute;
top: calc(50% - 10px); /* half of font size */
left: 0px;
text-align: center;
width: 100%;
z-index: 999;
}
关于html - 将每个文本水平和垂直居中到其图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30110262/