저는 작은 컨설팅 팀을 위해 한 페이지 사이트를 만들고 있는데, 섹션에 팀이 나타 났을 때 텍스트 상단에 추가하고 싶은 이미지에 정당한 콘텐츠를 정렬 할 수 없습니다.
여기 내가 가진 것입니다
HTML
<section>
<h2 class="altura">Equipo</h2>
<div class="container">
<div class="teamg">
<img class="fotoequipo" src="img/brad1.jpg">
<h3>Ps. Brad Pitt</h3>
<h4>Associate</h4>
<p>Lorem ipsum.</p>
</div>
<div class="teamg2">
<img class ="fotoequipo1" src="img/jen1.jpg">
<h3>Ps. Jennifer Aniston</h3>
<h4>Associate</h4>
<p>Lorem Ipsum.</p>
</div>
</div>
</section>
CSS
.altura {
margin: 3vw 20vw 3vw 20vw;
}
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
.teamg {
grid-column-start: 2;
}
.teamg img {
align-content: center;
height: 180px;
width: 180px;
border-radius: 50%;
border: 5px solid #2b2c35;
}
.fotoequipo {
align-items: center;
height: 180px;
border-radius: 50%;
border: 5px solid #2b2c35;
}
.teamg2 {
grid-column-start: 4;
}
.teamg2 img {
align-content: center;
height: 180px;
width: 180px;
border-radius: 50%;
border: 5px solid #2b2c35;
}
다음과 같이 텍스트를 중앙에 배치해야합니다.
.teamg {
grid-column-start: 2;
text-align: center;
}
이:
.teamg2 {
grid-column-start: 4;
text-align: center;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다