html - 一个类的所有元素可以放在同一个位置吗？

Question

我想知道是否有任何方法可以使某个类的每个元素都位于同一位置？我想做的是，当您将鼠标悬停在某个图像上时，我希望有关该图像的文本出现在所有其他图像之间的中央位置。我知道如何通过对每个元素的位置进行硬编码来做到这一点，但这很痛苦，并且不是使用内联样式的好习惯。

所以我的问题是:如何让某个类的每个元素都放在同一个位置？

示例如下:http://homeinspectioncarync.com/testpage/

代码如下:

HTML:

<div class="image-container">
  <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/00c/2ab/35ae340.jpg" class="images">
  <p class="fixed">Dave</p>
  <p class="para name">Dave</p>
  <p class="para title" ">Senior Inspector</p> 
<p class ="para bio " >"This is an example of a Bio. We need to get a bio for each one of our inspectors in order to complete this page! "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectionraleighnc.com/wp-content/uploads/2010/11/Glenns-Photo-1.png " class="images "> 
<p class="fixed ">Glenn</p> 
<p class="para name " >Glenn </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >"Licensed: State Home Inspector, General Contractor, Sub-surface Waste Water Inspector. Part owner and senior inspector, responsible for maintaining the highest quality of the field inspections, including both the comprehensiveness
    of the inspection itself and the interpersonal relationships with the client, realtor and all other personal involved in the inspection process. "</p> 
</div> 
<div class="image-container ">
<img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/p160x160/18718_2753855091076_8128390731521222770_n.jpg?oh=d1d49aea28d3cb6ff76033db1ae056ba&oe=57D998E2 " class="images "> <p class="fixed ">Spencer</p> 
<p class="para name " >Spencer</p>
 <p class ="para title " >Trainee</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="https://scontent-sjc2-1.xx.fbcdn.net/v/t1.0-1/c22.22.272.272/s160x160/166620_1817593049535_5878435_n.jpg?oh=78d8a42398b126fc1f75d1b32295029a&oe=57D73E8C " class="images "> <p class="fixed ">Chuck</p> 
<p class="para name ">Chuck </p> 
<p class ="para title " >Senior Inspector</p>
<p class ="para bio ">" "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/trevor-e1464897672300.jpg " class="images "> 
<p class="fixed ">Trevor</p> 
<p class="para name ">Trevor </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/betterrob-e1464897851528.jpg " class="images "> <p class="fixed ">Rob</p> 
<p class="para name ">Rob </p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div> 
<div class="image-container "> 
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Chrome_Logo.svg/1024px-Chrome_Logo.svg.png " class="images "> 
<p class="fixed ">Anthony</p> 
<p class="para name " >Anthony</p> 
<p class ="para title " >Senior Inspector</p> 
<p class ="para bio " >" "</p> 
</div>

CSS:

.images {
  height: 100px;
  width: 100px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 1000ms ease;
}

.image-container {
  position: relative;
  margin-left: 80px;
  display: inline-block;
}

.image-container:hover .images {
  opacity: 0.5;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.para {
  position: absolute;
  display: inline-block;
  font-size: 200%;
  opacity: 0;
  transition: all 1000ms ease;
}

.image-container:hover .para {
  opacity: 1;
}

.para.name {
  position: absolute;
  font-size: 200%;
  font-weight: bold;
  color: #01ba7c;
}

.para.title {
  position: absolute;
  font-size: 170%;
  font-style: italic;
  color: grey;
}

.para.bio {
  position: absolute;
  font-size: 150%;
  width: 450px;
  height: 300px;
  color: #000000;
}

.fixed {
  position: absolute;
  top: -30px;
  left: 20px;
  font-size: 150%;
  color: #000000;
}

我希望 .para.name 全部出现在图像第一行下方的中央。 .para.title 和 .para.bio 也应该在中间，但在 .para.name 的左边。

提前感谢您对此的任何帮助!

Answer 1

一种方法是使用 JavaScript getElementsByClassName，循环访问返回的集合并为每个元素设置相同的位置。

类似于 this .

注意:我已经在您使用的类上设置了 position: fixed;，在这种情况下可能不是您想做的，但是如果您四处修修补补，您会得到您需要的。