Question

我想在悬停时在图像上添加居中文字。

这就是我所拥有的。

我尝试使用margin-top强行移动文本，但页面调整大小的结果不一致。

如何将这篇文章集中在一起？

＆＃13;

.featuredText {
  position: absolute;
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  text-align: center;
}

＆＃13;

<div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
  <div class="centeredText">text</div>
</div>

＆＃13;

Answer 1

#container {
    display: inline-flex;
    position: relative;      /* establish nearest positioned ancestor for abspos */
    cursor: pointer;
}

.centeredText {
    display: none;
}

#container:hover > .centeredText {
    display: inline-block;
    font-size: 4em;
    color: white;
    position: absolute;               /* remove from document flow */
    left: 50%;                        /* center horizontally */
    top: 50%;                         /* center vertically */
    transform: translate(-50%,-50%)   /* tweak for precise centering; details:
                                       http://stackoverflow.com/q/36817249 */
}

<div id="container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
  <div class="centeredText">text</div>
</div>

jsFiddle

Answer 2

EDIT / CHANGE：

https://codepen.io/anon/pen/NNZPwg

（仅限左侧的第一张图片）

制作：

.featuredText {
  display: inline-block;
  position: absolute;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 24px;
  background: #fa0;
}

并将position: relative;添加到header div

top: 50%将其向下移动容器高度的50％，transform:translateY(-50%);将其向上移动50％的文本块高度，从而导致垂直居中。 left:50%和translateX(-50%)执行水平居中。

Answer 3

不要在文本上使用flex。它不起作用。 Flex用于父元素。

通过向父级添加相对位置，然后将绝对定位的文本居中，可以更轻松地完成此任务。

我将在一分钟内添加一个代码示例。

.image-container {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  line-height: 0;
}
.centeredText {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align:center;
  line-height: 1.2;
}

<div class="image-container">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
  <div class="centeredText">text</div>
</div>

使用flexbox将图像居中显示在图像上

3 个答案:

jsFiddle