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

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，我会为 class .text-center

使用 flexbox

浏览器对 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>

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

Horizontally and vertically center span and image

html

css

image

center

alignment