无法在图像中间显示文本
Posted
技术标签:
【中文标题】无法在图像中间显示文本【英文标题】:cant get my tekst in the middle of my image 【发布时间】:2020-04-11 15:13:35 【问题描述】:我正在与我的代码作斗争,但无法弄清楚为什么我不能让它像我想要的那样工作, 我试图让我的图像中的文本居中。
所以当我将鼠标悬停在图像上时,文本会出现, 只是现在我希望它在中间。 texy-align: center 对我不起作用?
在其他问题上得到了一些帮助,所以我又来了,哈哈
/*content*/
.container
width: 940px;
margin: 70px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.container .box
position: relative;
width: 300px;
height: 198px;
background: #555;
margin: 5px;
box-sizing: border-box;
display: inline-block;
.container .box .imgbox
position: relative;
overflow: hidden;
.container .box .imgbox img
transition: transform 2s;
.container .box:hover .imgbox img
transform: scale(1.2);
.container .box .details
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
backgound: rgba(0,0,0,.8);
transform: scaleY(0);
transition: transform .5s;
.container .box:hover .details
transform: scaleY(1);
.container .box .details .content
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 15px;
color: #FFF;
.container .box .details .content h2
margin: 0;
padding: 0;
font-size: 30px;
color: #FFF;
.container .box .details .content p
margin: 0;
padding: 0;
font-size: 20px;
color: #FFF;
<!--containers-->
<div class="container">
<!--Basis-->
<div class="box">
<div class="imgbox">
<img src="images/basis1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Basis</h2>
</div>
</div>
</div>
<!--Standaard-->
<div class="box">
<div class="imgbox">
<img src="images/standaard1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Standaard</h2>
</div>
</div>
</div>
<!--Luxe-->
<div class="box">
<div class="imgbox">
<img src="images/luxe1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Luxe</h2>
</div>
</div>
</div>
</div>
【问题讨论】:
【参考方案1】:您似乎已经在做top:50%
和translateY 50%
,您必须对X 做同样的事情。改用translate(-50%,-50%)
并设置left:50%;
。
.container .box .details .content
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
下面的演示;
/*content*/
.container
width: 940px;
margin: 70px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.container .box
position: relative;
width: 300px;
height: 198px;
background: #555;
margin: 5px;
box-sizing: border-box;
display: inline-block;
.container .box .imgbox
position: relative;
overflow: hidden;
.container .box .imgbox img
transition: transform 2s;
.container .box:hover .imgbox img
transform: scale(1.2);
.container .box .details
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
backgound: rgba(0, 0, 0, .8);
transform: scaleY(0);
transition: transform .5s;
.container .box:hover .details
transform: scaleY(1);
.container .box .details .content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
color: #FFF;
.container .box .details .content h2
margin: 0;
padding: 0;
font-size: 30px;
color: #FFF;
.container .box .details .content p
margin: 0;
padding: 0;
font-size: 20px;
color: #FFF;
<!--containers-->
<div class="container">
<!--Basis-->
<div class="box">
<div class="imgbox">
<img src="images/basis1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Basis</h2>
</div>
</div>
</div>
<!--Standaard-->
<div class="box">
<div class="imgbox">
<img src="images/standaard1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Standaard</h2>
</div>
</div>
</div>
<!--Luxe-->
<div class="box">
<div class="imgbox">
<img src="images/luxe1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Luxe</h2>
</div>
</div>
</div>
</div>
【讨论】:
谢谢分配!我已经在玩百分比了,但就是不能把它放到中间,一直在错误地转移哈哈 thnx allot!【参考方案2】:你也可以使用
flex
来试试这个
/*content*/
.container
width: 940px;
margin: 70px auto 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.container .box
position: relative;
width: 300px;
height: 198px;
background: #555;
margin: 5px;
box-sizing: border-box;
display: inline-block;
.container .box .imgbox
position: relative;
overflow: hidden;
.container .box .imgbox img
transition: transform 2s;
.container .box:hover .imgbox img
.container .box .details
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
backgound: rgba(0,0,0,.8);
transform: scaleY(0);
.container .box:hover .details
transform: scaleY(1);
display: flex;
align-items: center;
text-align: center;
width: 100%;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
.container .box .details .content
display: block;
width: 100%;
color: #FFF;
.container .box .details .content h2
margin: 0;
padding: 0;
font-size: 30px;
color: #FFF;
.container .box .details .content p
margin: 0;
padding: 0;
font-size: 20px;
color: #FFF;
<!--containers-->
<div class="container">
<!--Basis-->
<div class="box">
<div class="imgbox">
<img src="images/basis1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Basis</h2>
</div>
</div>
</div>
<!--Standaard-->
<div class="box">
<div class="imgbox">
<img src="images/standaard1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Standaard</h2>
</div>
</div>
</div>
<!--Luxe-->
<div class="box">
<div class="imgbox">
<img src="images/luxe1.jpg" />
</div>
<div class="details">
<div class="content">
<h2>Luxe</h2>
</div>
</div>
</div>
</div>
【讨论】:
以上是关于无法在图像中间显示文本的主要内容,如果未能解决你的问题,请参考以下文章
无法在 Recyclerview 中显示图像 - 文本已成功显示