3개의 이미지 정렬법 질문요
본문
안녕하세요
퍼블리싱 질문드립니다.
가장 외부의 div tag 안에(이것에 vertial-align:middle을 해도 안먹어요-_-)
A, B, C 이미지 3개가 있습니다.
각 이미지는 각각 서로 다른 div태그로 감싸져 있습니다(바로 위 정렬하려고 제가 이렇게 했는데요..이미지 모두 한개의 div안에 있어야 쉬운가요? 한개의 div 태그안에 있으면 잘 안되는거 같아서)
각 이미지는 가로 세로 사이즈가 모두 서로 다 틀립니다.
가장 왼쪽에 A, 가운데에 B, 가장 오른쪽에C를 정렬 시키고 싶습니다.
물론 A,B,C모두 수직상으로도 가운데에 오게(middle)하고 싶습니다.
CSS를 어떻게 해야 할까요?
감사합니다
질문 정리) 아래 상황에서
<div id="outest"> //사실 이 것은 사이트 최상단의 hd_wrapper입니다.
<div id="left_img">
<img src="어쩌구 저쩌구">
</div>
<div id="center_img">
<img src="어쩌구 저쩌구">
</div>
<div id="right_img">
<img src="어쩌구 저쩌구">
</div>
</div>
답변 2
아참 감사합니다^^
출처 : https://blog.asamaru.net/2017/04/04/css-image-vertical-center/
<style type="text/css">
#outest{
height:600px;
}
#outest div{
float:left;
width:33.1%;
border:1px solid red;
height:100%;
position:relative;
}
#outest div img{
border:1px solid blue;
position:absolute;
max-width:100%; max-height:100%;
margin:auto;
top:0; bottom:0; left:0; right:0;
}
</style>
<div id="outest">
<div id="left_img">
<img src="어쩌구 저쩌구" width='100' height='300'>
</div>
<div id="center_img">
<img src="어쩌구 저쩌구" width='200' height='200'>
</div>
<div id="right_img">
<img src="어쩌구 저쩌구" width='300' height='500'>
</div>
</div>
첫번째 이미지가 왼쪽에 안붙어서^^
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.