Question

我想要做的就是将我的文字垂直和水平放在img ..

上

尝试了很多事情但到目前为止没有任何作用：/

    <div class="img_container">
     <img class="cover-image" src="img.jpg" alt="omg" />
     <h2> bla bla bla </h2>
   </div>

  .img_container {
    width: 100%;
  }

  .img_container h2 {
    margin: 0;
  }

Answer 1

只需使用绝对位置和翻译。将完美居中（水平和垂直）

.img_container {
  position: relative;
}
.img_container img {
  width: 100%;
  height: auto;
}
.img_container h2 {
  color: white;
  text-shadow: 1px 1px 1px black;
  position: absolute;
  top: 50%;
  left:  50%;
  -webkit-transform: translate(-50%, -50%); /* iOS */
  transform: translate(-50%, -50%);
}

<div class="img_container">
  <img class="cover-image" src="http://lorempixel.com/400/200/sports/" alt="omg" />
  <h2> bla bla bla </h2>
</div>

Answer 2

这是一个很好的tuto：css-tricks.com - Text Blocks Over Image。

基本上，您可以使用position: absolute修复文字，然后使用top，left等将其移到您想要的位置。

Answer 3

1）你可以简单地将图像放在图像容器的背景中，然后简单地将css属性赋予图像容器

style="vertical-align:middle and text-align center"

或者

2）您可以使用这些课程来完成工作。

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

其中html代码就像

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       Text of variable length
    </div>
</div>

Answer 4

另一种实现方式：

＆＃13;

.img_container {
    width: auto;
    position: relative;
    display: inline-block;
  }

.img_container h2 {
    position: absolute;
    top: 40%; /* adjust accordingly to suit requirements */
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
}

＆＃13;

<div class="img_container">
     <img class="cover-image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" alt="omg" />
     <h2>Postioned Absolute</h2>
   </div>

＆＃13;

CSS：如何在图像上垂直和水平居中文本

4 个答案: