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

时间:2016-05-18 22:46:51

标签: html css css3 flexbox

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

这就是我所拥有的。

enter image description here

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

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



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

<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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

#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

答案 1 :(得分:0)

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%)执行水平居中。

答案 2 :(得分:0)

不要在文本上使用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>