한 클래스의 모든 요소를 ​​같은 위치에 배치 할 수 있습니까?

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에 대한 싶습니다. 이름은 모두 이미지의 첫 번째 행 아래에 가운데에 표시됩니다. .para.title과 .para.bio는 중앙에 있어야하지만 .para.name의 왼쪽에 있어야합니다.

사전에 도움을 주셔서 감사합니다.

Answer 1

편도 방법은 JavaScript를 사용하여 getElementsByClassName에 반환 된 컬렉션을 반복하고 각 요소에 대해 동일한 위치를 설정하는 것입니다.

같은 것은 this입니다.

참고 : 내가 사용한 수업에 position: fixed;을 설정 했으므로이 시나리오에서하고 싶은 일은 아니지만 주위를 어루 만져 본다면 필요한 것을 얻을 수 있습니다.

Answer 2

이미지 컨테이너에서 위치를 제거하고 행과 같은 상위 요소에 대해 배치 할 수 있습니다. 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를 컨테이너에 랩핑하고 이름이나 제목 배치에 대해 걱정할 필요가 없도록 배치해야합니다.