一个class的所有元素可以放到同一个位置吗？

Question

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

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

示例如下：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

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

类似于this。

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

Answer 2

如果您删除图像容器上的定位并让它们定位在像行这样的 parent 元素上，则可以。 CSS 看起来像这样：

.et_pb_module {
  position: relative;
}

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

.image-container {
  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;
  top: 100%;
  left: 50px;
  font-size: 200%;
  font-weight: bold;
  color: #01ba7c;
}

.para.title {
  position: absolute;
  top: 100%;
  left: 50px;
  margin: 30px 0 0;
  font-size: 170%;
  font-style: italic;
  color: grey;
}

.para.bio {
  position: absolute;
  top: 100%;
  left: 50px;
  margin: 90px 0 0;
  font-size: 150%;
  width: 450px;
  height: 300px;
  color: #000000;
}

.fixed {
  font-size: 150%;
  color: #000000;
}

因为每个元素都是绝对定位的，所以它不能根据换行之类的东西调整它的渲染位置。这意味着即使没有第二行，您也需要额外的一行，否则它看起来会损坏。理想情况下，您可以将 .name、.title 和 .bio 包装在一个容器中并绝对定位，这样您就不必担心名称或标题包装问题。

一个class的所有元素可以放到同一个位置吗？

Can all elements of one class be put into the same position?

html

css

text

class

centering