img 세개를 정렬하는법 질문드립니다.

img 세개를 정렬하는법 질문드립니다.

QA

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;
}

https://css-tricks.com/almanac/properties/a/align-items/

사실 각각의 이미지를 서로 다른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>

아니요 테이블이 반응형이 안맞다니요^^

%로만 조절하면서 테이블도 겸용으로 쓰면 안정적입니다.

<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>

 

이게 표준일텐데요?

답변을 작성하시기 전에 로그인 해주세요.
전체 34
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT