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

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，我会为 .text-center 类使用弹性框

浏览器支持 flexbox here

更多关于 flexbox 的信息here

.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;
}

<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 2

如果已知所有图像的高度（我看到您使用200px 作为高度），您可以使用CSS transform 使用translate function (IE9+)。此属性在以百分比形式应用时，考虑元素的大小而不是其父元素的大小：

.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>