Question

我正在寻找这个问题的解决方案一小时，我在互联网上找到的东西永远不会与我正在寻找的东西完全匹配。我想用CSS将文本居中在图像上。图像的高度是根据div的宽度自动定义的（以百分比表示）。

这里是html代码：

<div>
  <img src="image.jpg" id="image"/> 
  <span id="texte"> Texte </span>
</div>

这里的CSS代码（不起作用）：

#div
{
  position: relative;
  margin: 0px;
  padding: 0px;
  width:45%;
  text-align:center;
}

#texte
{
  display: block;
  padding: 0px;
  margin-left:auto;
  margin-right:auto;
  z-index: 2;
}

#image
{
  width:100%;
  height:auto;
  display: block;
  padding: 0px;
  z-index: 1; 
}

感谢您的帮助。

Answer 1

如果从CSS中的div中删除＃（因为它是标记，而不是ID），并将以下属性添加到#text块中：

position: absolute; /* so that the "top" property can be applied */
top: 50%; /* puts the top of the element halfway down what it's relative to, in this case the div */
margin-top: -.6em; /* assuming no wrapping, this slight adjustment makes it so the middle of the text (instead of its top) runs roughly through the middle of the parent */
width: 100%; /* in case you meant horizontal centering instead. this allows the parent's "text-align: center" to be applied */

我认为应该完成你正在寻找的东西。如果文本长于一行并且您需要精确的垂直居中，我认为您必须使用JavaScript解决方案。这里有JS Fiddle，其中包含我的CSS编辑功能（尽管现在可能不再需要某些CSS了。）

Answer 2

尝试一下

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
   position: relative;
   overflow: hidden;
}

img {
   width: 100%;
   opacity: .8;
} 

.centered-text {
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 50%;
   color: white;
   padding: .7em 1em;
   text-align: center;
   font-size: 1.5em;
   background-color: rgba(0, 0, 0, .4);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

<div class="container">
  <img src="https://parrot-tutorial.com/images/nature_autumn.jpg">
  <span class="centered-text">Text</span>
</div>

参考： How To Position Text Over an Image

在CSS中具有未知高度的图像上的中心文本

2 个答案: