Question

我正在试图弄清楚如何在图像中间正确定位文本。我设法让它居中，但只是在图像的最顶端，并没有死在中间。

#ImageMain {
  background-image: url(C:/Users/Gabriel/Downloads/bg.jpg);
  width: 80%;
  height: 700px;
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
  opacity: 0.8;
}

#TextMain h1 {
  font-size: 100px;
  font-family: "PT Sans", sans-serif;
}

<div id="ImageMain">
  <div id="TextMain">

    <h1>Shop our Whole Selection</h1>

  </div>
</div>

Answer 1

您可以使用#ImageMain上的简单弹性框调整来进行垂直居中和放大text-align上的h1用于水平居中（placehold.it图片用作演示）：

#ImageMain {
  background-image: url(https://placehold.it/500x500);
  width: 80%;
  height: 700px;
  position: relative;
  /* new */
  display: flex;
  align-items: center;
  /* end new */
  margin-right: auto;
  margin-left: auto;
  opacity: 0.8;
}

#TextMain h1 {
  font-size: 100px;
  font-family: "PT Sans", sans-serif;
  /* new */
  text-align: center;
}

<div id="ImageMain">
  <div id="TextMain">
    <h1>Shop our Whole Selection</h1>
  </div>
</div>

Answer 2

包装div块

中的文本

 <div name="text_main"><p>text</p></div>


  //apply css properties...
 //adjust position by applying margin-top and margin-bottom
 // then position the element by
  float:center //and try to make positon:fixed

Answer 3

在HTML中垂直居中的内容仍然是一个皮塔饼。

＆＃13;

#TextMain {
    border: solid 1px red;
    height: 20em;
    display: table-cell;
    vertical-align: middle;
}

h1 {
    border: solid 1px blue;
}

＆＃13;

<div id="ImageMain">
<div id="TextMain">

<h1>Shop our Whole Selection</h1>

</div>
</div>

＆＃13;

这只是众多方法中的一种。这个没有使用任何技巧或变通方法或供应商特定说明。它应该无处不在。

Answer 4

这可以使用css中的flex属性来实现：

#ImageMain {
background:#eee;
width: 80%;
height: 700px;
position: relative;
display:flex;
align-items:center;
justify-content:center;
}

#TextMain h1 {
font-size: 100px;
font-family: "PT Sans", sans-serif;
text-align:center;
}

<div id="ImageMain">
<div id="TextMain">

<h1>Shop our Whole Selection</h1>

</div>
</div>

图像中间的中心文本

4 个答案: