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

标签 html css class text centering

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

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

示例如下: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 的左边。

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

最佳答案

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

类似于 this .

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

关于html - 一个类的所有元素可以放在同一个位置吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37662675/

相关文章:

javascript - 使用 base64 更改 src 后刷新图像元素

html - 可以仅使用 HTML/CSS 进行测验吗?

javascript - Css 抖动文本翻译

c++ - 对象已经定义

c# - 计算类计数的部分语法

javascript视频自定义控件

html - 如何将我的移动菜单置于内容之上?

jquery - 无法使 JQgrid 4.5.2 卡住列正常工作——只有标题在移动

c++ - 类内类的访问方法

html - Bootstrap 图标在我所有的浏览器上呈现为一个空框