img 세개를 정렬하는법 질문드립니다. 채택완료
안녕하세요
퍼블리싱 질문드립니다.
가장 외국 div tag 안에(이것에 vertial-align:middle을 해도 안먹어요-_-)
A, B, C 이미지 3개가 있습니다.
가장 왼쪽에 A, 가운데에 B, 가장 오른쪽에C를 정렬 시키고 싶습니다.
물론 A,B,C모두 수직상으로도 가운데에 오게(middle)하고 싶습니다.
각 이미지는 가로 세로가 다 틀립니다.
CSS를 어떻게 해야 할까요?
감사합니다
답변 6개
<style>
.box{position:relative;width:800px;height:600px;border:1px solid red;}
.box img{
position:absolute;
top:50%;
background:skyblue;
border:1px solid #ccc;
}
.box img.a{
width:100px;
height:200px;
left:0%;
transform:translate(-0%, -50%)
}
.box img.b{
width:150px;
height:300px;
left:50%;
transform:translate(-50%, -50%)
}
.box img.c{
width:200px;
height:200px;
right:0%;
transform:translate(-0%, -50%)
}
</style>
<div class="box">
<img src="" class="a" >
<img src="" class="b" >
<img src="" class="c" >
</div>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
<style>
.wrap { width:600px; height:400px; line-height:400px; }
.wrap table { width:100%; margin:0 auto; }
.wrap .img_box { vertical-align:middle;text-align:center}
</style>
<div class="wrap">
<table>
<col width="200">
<col width="200">
<col width="200">
<tr>
<td><div class="img_box">이미지1</div></td>
<td><div class="img_box">이미지2</div></td>
<td><div class="img_box">이미지3</div></td>
</tr>
</table>
</div>
답변에 대한 댓글 1개
그런데 table 태그는 반응형에 안맞는거 아닌가요^^
아닌가 테이블이 나으려나 ??? ㅎ
댓글을 작성하려면 로그인이 필요합니다.
각 이미지마다 레이어로 감싸면 쉽지 않나요?
그리고
<div>
이미지1
이미지2
이미이3
</div>
보다
<div>
<div>이미지1</div>
....
</div>
이게 표준일텐데요?
답변에 대한 댓글 2개
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
<style>
.img_wrap{padding:20px;text-align:center;border:1px solid #ddd}
.img_wrap img{margin:0 30px;vertical-align:middle}
</style>
<div class="img_wrap">
<img src="../A.jpg ">
<img src="../B.jpg ">
<img src="../C.jpg ">
</div>
답변에 대한 댓글 2개
가운데 이미지가 정중앙에 배치안되지 않나요?
답변은 그래도 감사합니다^^
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p>.flex-container {</p>
<p> align-items: flex-start;</p>
<p>}</p>
<p>답변에 대한 댓글 3개
그래서 그런지 말씀해주신 방법으로는 안되네요-_- ^^
아무튼 감사합니다^^
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인