我想在悬停时在图像上添加居中文字。
这就是我所拥有的。
我尝试使用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;
答案 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>
答案 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>