Question

我想将文本准确地放在背景图像的中心而不使用和位置相对或绝对。大多数在线答案使用绝对位置文本和顶部。但我不想使用任何定位

Answer 1

垂直对齐 - line-height: ...; // background height表示子（文字）。关于这家酒店的更多info。
父级的水平对齐 - text-align: center;。

＆＃13;

.box {
  display: block;
  position: relative;
  background-image: url( "http://www.bluecrayon.net/wp-content/uploads/2013/03/JokerHeathLedger_2013-03-02_web-300x300.jpg");
  background-repeat: no-repeat;
  background-position: center;
  height: 300px;
  width: 300px;
  text-align: center;
}

.text {
  line-height: 300px;
  color: red;
  font-weight: 700;
  font-size: 32px;
}

＆＃13;

<div class="box">
  <span class="text">why so serious?</span>
</div>

＆＃13;

Answer 2

你有没有尝试过：

margin: 0 auto;
text-align: center;
vertical-align: middle;

Answer 3

您还可以使用内嵌边距（顶部，底部，右侧或左侧）来定位您想要图像的位置。您只需将保证金设为px（保证金：10px），您就可以在浏览器上在线试用（通常只需按F12，屏幕上显示所有信息）

Answer 4

您可以使用 flex 。

＆＃13;

.container {
    display: flex;
    width: 350px;
    height: 350px;
    background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
}

.item {
    background-color: white;
    width: 80px;
    height: 80px;
    margin: auto;
}

＆＃13;

<div class="container">
  <div class="item">Sample Text</div>
</div>

＆＃13;

Answer 5

使用Flexbox很容易解决问题

.test{
  background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;
  }

<div class="test">Hello World</div>

对齐背景图像上的文本而不进行定位

5 个答案: