Html 垂直对齐文本

我试图垂直对齐div中的一些文本，而文本位于图像下

我不太擅长解释事情，但这是我目前掌握的代码：

HTML:

谢谢

---

奥斯卡。

将您的“childname”类更改为：

    .childName {
  /* Behind Image */
  position: relative;
  z-index: 0;
  line-height: 90px;
  /* In Center */
  text-align: center;
  /* Nice handwriting font */
  font-family: 'Luckiest Guy', cursive;

---

这里的技巧是线条高度：）

使用显示flex。这是非常容易和简单的使用

检查一下

---

你到底想把文字放在哪里？嗨，奥斯卡，我真的不知道你想达到什么目的。你想要<代码> <代码>垂直对齐还是在图像下面？就像它在小提琴中，但在圆圈的中间，当图像消失时，而不是它现在的样子。它不在中心，但是你可以看到这个设置宽度和高度的<代码> H1 < /Cord>标签继承，使文本可见但不完全在中心。实际应用程序是动态的，因此某些文本可能有多行。不过还是要谢谢你。：-）没关系。只需将行高设置为容器的宽度（或其一半）。如果文字太多，我建议减小字体大小。尽管如此，线条高度对垂直对齐有效，但这似乎没有响应。这不是一个可行的解决方案Hey Oscar，修复了该实现中的一个小错误。我已经更新了小提琴链接。检查一下。

    .childContainer {
  /* Height and width */
  height: 10rem;
  width: 10rem;
  /* Hide overflow */
  overflow: hidden;
  /* Allows z-index */
  position: relative;
  /* Circle */
  border-radius: 50%;
}

.childLink {
  /* No default link styling */
  color: #000;
  text-decoration: none;
  /* All Bubble is link */
  height: 100%;
  width: 100%;
  /* Circle */
  border-radius: 50%;
}

.childImg {
  /* Full Bubble */
  height: 100%;
  width: 100%;
  /* On top of text */
  z-index: 1;
  position: absolute;
  /* Fade in/out stuff */
  opacity: 1;
  transition: opacity .30s ease-in-out;
  -moz-transition: opacity .30s ease-in-out;
  -webkit-transition: opacity .30s ease-in-out;
}

.childNameWrapper {
  vertical-align: middle;
    display: table-cell;
}
@import url('http://fonts.googleapis.com/css?family=Roboto:400,300|Luckiest+Guy');
.childName {
  /* Behind Image */
  position: absolute;
  z-index: 0;
  /* In Center */
  text-align: center;
  /* Nice handwriting font */
  font-family: 'Luckiest Guy', cursive;
}

.childImg:hover {
  /* Fade on hover */
  opacity: 0;
  transition: opacity .30s ease-in-out;
  -moz-transition: opacity .30s ease-in-out;
  -webkit-transition: opacity .30s ease-in-out;
}

    .childName {
  /* Behind Image */
  position: relative;
  z-index: 0;
  line-height: 90px;
  /* In Center */
  text-align: center;
  /* Nice handwriting font */
  font-family: 'Luckiest Guy', cursive;

.childLink {
    display:flex;
    align-items : center;
   /* No default link styling */
    color: #000;
    position:relative;
    text-decoration: none;
   /* All Bubble is link */
   height: 100%;
   width: 100%;
   /* Circle */
  border-radius: 50%;
  //  vertical-align:middle;
}