Question

我想垂直放置我的H2文字＆amp;水平居中于我的形象。

有人能解释我是怎么做到的吗？

＆＃13;

<div class="content">

<img src="http://placehold.it/940x510">
<h2>
TEXT WILL GO HERE
</h2>

</div>

＆＃13;

Answer 1

拨弄https://jsfiddle.net/q3odxfmb/1/

img {
    max-width: 100%;
    vertical-align: middle;
}

#container {
    position: relative;
}

#text-outer {
    height: 100%;
    margin-left: 12.5%;
    position: absolute;
    top: 0;
    width: 75%;
}

#text-inner {
    color: #fff;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

这个问题已经问过很多次了，请参考这个链接

谢谢大家

Text Above Image CSS Z-Index Not Working

Answer 2

这很容易。只需将css设置为：

notifyItemRemoved(position)

然后将div中的边距设置为auto：

.h2 {
line-height:/*height of your image*/
}

这应该是完美的中心。

您必须为此方法设置较小的边距。

这是一个带有简单方法的JSBin： https://jsbin.com/vawowebolu/edit?html,css,js,output

Answer 3

将文本设置为div上的背景，并将文本居中于div。

HTML：

<div class="content">
    <h2 id="mytext">
    TEXT WILL GO HERE
    </h2>
</div>

CSS：

div {
    background: url("<image-link>")
}

#mytext {
    line-height: 510px;
    vertical-align:middle;
    text-align: center;
}

将文本集中放在图像上

3 个答案: