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>
오!! 감사합니다^^ 정말 감사합니다^^
.flex-container {
align-items: flex-start;
}
사실 각각의 이미지를 서로 다른div태그안에 넣었고요(이유:왼쪽 이미지를 왼쪽에 배치 오른쪽 이지리를 가장 오른쪽에 배치하려고)
그래서 그런지 말씀해주신 방법으로는 안되네요-_- ^^
아무튼 감사합니다^^
죄송하지만 다시 질문글 올려드릴께요
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.
아 이것도 좋은 방법같네요... 감사합니다
<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>
감사합니다
그런데 table 태그는 반응형에 안맞는거 아닌가요^^
아닌가 테이블이 나으려나 ??? ㅎ
아니요 테이블이 반응형이 안맞다니요^^
%로만 조절하면서 테이블도 겸용으로 쓰면 안정적입니다.
감사합니다 나중에 테이블로 해볼께요^^
<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>
이 방식으로는 좌측 이미지가 좌측에 ..우측 이미지가 우측에
가운데 이미지가 정중앙에 배치안되지 않나요?
답변은 그래도 감사합니다^^
죄송하지만 다시 질문글 올려드릴께요
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.
각 이미지마다 레이어로 감싸면 쉽지 않나요?
그리고
<div>
이미지1
이미지2
이미이3
</div>
보다
<div>
<div>이미지1</div>
....
</div>
이게 표준일텐데요?
그렇게 해서 안되서 질문드렸어요^^ 도저희 안되네요^^
죄송하지만 다시 질문글 올려드릴께요
일단 이 질문 종료하고 다시 글 올려드립니다.
감사합니다.