Question

我试图弄清楚如何将每个文本水平和垂直居中到我对应的图像到目前为止。

有人有任何建议吗？

这是我到目前为止所做的：

<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%;}

FIDDLE

Answer 1

如果您需要保留HTML标记，可以这样使用：

update-database

.content{
    width: 100px;
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    position: relative;
}
.content span {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    width: 100%;
}
.thumbnils{
    width: 70%;
}

但如果你不需要为IE8而烦恼呢？兼容性和那些只是图像，你可以像这样使用：

<div class="content">
    <span>CYREX</span>
    <input type="image" src="http://img42.com/qXPbx+" class="thumbnils" />
</div>
<div class="content">
    <span>HITMAN</span>
    <input type="image" src="http://img42.com/qXPbx+" class="thumbnils" />
</div>

.content {
    width: 100px;
    display: block;
    float:left;
    text-align: center;
    padding: 0;
    position: relative;
    background: url("http://img42.com/qXPbx+") no-repeat center center;
    background-size:contain;
    height: 80px;
    line-height: 80px;
}

但要注意background-size browser compatibility。

Answer 2

如果你想保留你的HTML并且不介意使用css3，你可以使用这个CSS：

.content{
    width: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    position: relative;
}
.content span {
    position:absolute;
    top:50%;
    left:50%;
    -moz-transform: translateY(-50%) translateX-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.thumbnils{
    width: 70%; 
}

考虑到我刚刚将您的文字包裹在span标记中，因此我可以使用css调用它。

<强> FIDDLE

Answer 3

将文本放入跨度并将其添加到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;
}

将每个文本水平和垂直居中于其图像

3 个答案: