无法在图像中间显示文本

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 中显示图像 - 文本已成功显示

我无法在我的 tkinter 图像上显示文本

如何在文本中间显示文本溢出省略号

Swift 3 iOS 10 - 带有图像和文本的 UICollectionView 无法正确显示

为啥使用 CSS 显示在绝对定位图像后面的文本?