Question

我正在尝试垂直对齐div中的某些文本，而文本在图像下。

我不太擅长解释事情，但这是我到目前为止的代码：https://jsfiddle.net/c1249bd8/

HTML：

<div class="childContainer">
    <a href="#" class="childLink">
        <img src="http://placekitten.com/g/500/500" alt="Test" class="childImg"/>
        <h1 class="childName">Testing</h1>
    </a>
</div>

CSS：

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

谢谢，

的奥斯卡。

Answer 1

将您的'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;

这里的诀窍是线路高度：）

Answer 2

使用显示flex 。它非常简单易用。

检查FIDDLE。

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

垂直对齐文本

2 个答案: