Question

我遇到了这个永远带我的问题，我正在建立一个投资组合网站，我想展示我所做的项目。我正在搞乱位置和居中，但我似乎无法做到正确。

我想要的是让图像和文本垂直和水平居中，文本与图像重叠。

我在这里制作了一个JSFidlle：https://jsfiddle.net/vw7ftzy8/1/

我最终想要的是：https://jsfiddle.net/vw7ftzy8/4/（但反应迅速）

.projectTest {
  color: white;
  padding: 10px 40px;
  background-color: rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-style: italic;
  font-size: 56px;
  position: absolute;
  z-index: 999;
}

.projectsImage1 {
  height: 200px;
  width: auto;
  position: absolute;
}

.projectsImage1Ghost {
  visibility: hidden;
  position: relative;
}

.text-center {
  position: relative;
  text-align: center;
  background-color:yellow;
}

<div class="text-center">
  <span class="projectTest">A test project</span>
  <img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png">
  <div class="projectsImage1 projectsImage1Ghost"></div>
</div>

Answer 1

假设您不需要支持旧版本的IE，我会使用flexbox进行类Equation

浏览器支持flexbox here

有关flexbox here

的更多信息

.text-center

.projectTest {
  color: white;
  padding: 10px 40px;
  background-color: rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-style: italic;
  font-size: 56px;
  position: absolute;
  z-index: 999;
}

.projectsImage1 {
  height: 200px;
  width: auto;
  position: absolute;
}

.projectsImage1Ghost {
  visibility: hidden;
  position: relative;
}

.text-center {
  position: relative;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 2

如果已知所有图像的高度（我发现您已使用200px作为高度），则可以使用translate function（IE9 +）使用CSS transform。此属性应用于百分比时，会考虑元素的大小而不是其父级的大小：

.text-center {
  background-color: yellow;
  height: 200px;
  position: relative;
  text-align: center;
  width: 100%;
}

.projectTest {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: 600;
  font-style: italic;
  font-size: 56px;
  left: 50%;
  padding: 10px 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 999;
}

.projectsImage1 {
  height: 100%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: auto;
}

<div class="text-center">
  <span class="projectTest">A test project</span>
  <img class="projectsImage1" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png">
</div>

水平和垂直中心跨度和图像

2 个答案: