[CSS] 이미지 수직 가운데 정렬

노란색 SH 로고가 상당히 윗부분에 자리잡고 있다.

 

킹받는다.

 

이 로고를 가운데로 위치시키고 싶다.

---

[수정 전 해결법]

 

다음은 contact 영역의 html 코드이다.

        <div class="contact">
            <h1>CONTACT</h1>
            <ul class="contact_contents">
                <li class="contact_logo">
                    <img src="img/Logo/txt_logo.png" alt="sh_film_txt_logo">
                </li>
                <li class="contact_txt">
                    <div>Addr. 경기도 성남시 분당구 판교역로 123-45 SH FILM <br>
                        Tel. 070-7777-7777<br>
                        Fax. 070-8888-8888<br>
                        E-mail. sh_support@sh_film.co.kr
                    </div>
                    <div class="contact_button">
                        CONTACT
                    </div>
                </li>
            </ul>
        </div>

 

대기업인 것 마냥 주소 판교로 해놓기

참고로 addr, tel, fax, e-mail 모두 가상의 정보들이다.

 

여기서 .contact_logo 부분이 내가 수직 가운데로 정렬하고 싶은 이미지가 포함되어 있는 클래스이다.

 

.contact_logo 의 css 영역에 line-height 코드를 포함시켜준다.

왜냐하면 나는 내 로고를 수직으로 가운데에 배치시키기 위해서 vertical-align 코드를 사용할 것이기 때문이다.

.contact_logo {
    display: table-cell;
    line-height: 100px;
    text-align: center;
    width: 25%;
    height: auto;
    background-color: yellow;
}

line-height : 100px; 의 이유는 노란색 부분의 height 값이 100px로 자리잡혔기 때문이다.

그리고 기왕이면 모두 가운데오 배치하고 싶어서 text-align : center; 도 추가했고,

width : 25%는 내가 계속 확인한 결과, 이 값이 제일 예쁘게 자리 잡혔기 때문이다.

height는 width 값에 따라 결정되도록 auto로 해주었다.

고정시키는 것보다 반응형으로 만들기 위해서는 % 단위를 사용하는게 아직까지는 더 효과적인 것 같다.

 

그리고 자식 코드이자 로고 이미지가 있는 img 태그의 css 영역에는 vertical-align : middle; 코드를 넣어주도록 하자.

.contact_logo>img {
    width: 90px;
    height: auto;
    vertical-align: middle;
}

원본 이미지의 크기가 너무 크기 때문에 width 값을 90px로 고정해주었다.

실제로 브라우저 크기가 커져도 이 사이즈대로 보였으면 해서 그대로 fix시킴

 

쫘좐

......................이 아니다

 

이 방식의 문제가 있다.

 

크롬 브라우저 창의 크기를 최대로 줄여 width 값이 margin 포함해서 485px가 되게 하면

이미 노란색 영역의 line-height 값을 100px로 고정시켜놓았기 때문에

브라우저 창이 최대로 줄여진 상태에서 노란색 영역의 height 값이 112px로 자리잡혀서

여전히 이미지가 가운데에 배치되지 않는 사태가 일어나게 된다.

 

노란색 영역의 width값과 height값은 각각 25%, auto로 지정했기 때문이다.

 

따라서 이는 근본적인 해결책이 될 수 없다.

브라우저 창이 최대로 줄여지면 말짱도루묵됨

 

요렇게

 

하지만 난 의지의 한국인 !

해결했음 ㅋ

---

[수정 후 해결법]

 

우선 line-height의 코드를 제거하였다.

진짜 1도 소용없음

 

여기서 집고 넘어가야 할 것이

부모 요소는 .contact_contents 이고,

자식 요소 중 노란색 영역에 해당 되는 게 .contact_logo 이다.

 

부모 영역은 이미 display : flex; 를 줘버렸기 때문에

이는 건들고 싶지 않았다.

 

그래서 일단 저 노란색 영역 자체의 크기를 이미지와 똑같은 height 로 맞추었다.

 

로고 이미지의 크기는 width : 90px, height : 65px로 고정시켜 놓았다.

왜냐하면 저 로고의 크기가 브라우저 창이 넓어지든 좁아지든 저 상태 그대로 크기가 고정되어 보이는게 간지라고 생각하기 때문이다.

로고 이미지가 커지거나 작아진다면 정신 사납게 보일 것 같았고, 원래 로고는 이미지가 고정되어 있으며 좀 작은게 간지 그 자체다.

 

어쨌든 이미지의 height 값이 65px이니,

저 노란색 영역의 height 값도 65px로 고정시켜주면 되지 않을까?

그러면 저 영역에서 거의 반토막이 될 테고, 어차피 로고 이미지 크기는 고정시켜놓는게 내 목적이었으니

그 노란색 영역이 곧 이미지 크기가 되면, 로고 이미지를 품고 있는 노란색 영역만 분홍색 영역에서 가운데로 배치시켜주면 되지 않을까?

라고 생각하고 당장 실행에 옮겼다.

 

.contact_logo의 height 값을 로고 이미지와 같은 값인 65px로 고정시켜주면 

다음 사진과 같이 나타난다.

.contact_logo {
    flex: 3;
    height: 65px;
    text-align: center;
    width: 25%;
    vertical-align: middle;
    background-color: yellow;
}

 

그럼 이 노란색 영역을 분홍색 영역의 가운데에 배치되게끔 해주면 된다.

 

이는 노란색 영역인 .contact_logo의 부모인 .contact_contents의 css 영역에 

align-items: center;

위의 코드를 추가해주면 된다.

 

저 코드를 추가하는 이유는 .contact_contents의 display 값은 flex이기 때문이다.

.contact_contents {
    display: flex;
    list-style: none;
    padding: 30px;
    align-items: center;
    background-color: lightcoral;
}

쫘좐

 

브라우저 창이 최대로 줄어서 우측 skyblue 영역인 txt의 수직 영역이 길어져서 height 값이 결론적으로 100px가 넘는 결과가 생겨도

로고는 가운데에 잘 붙어있다.

 

반대로 브라우저 창이 최대로 늘어나서 우측 txt의 height 값이 원상복구되어도 로고는 가운데에 잘 붙어있다.

쫘좐

 

이제 이미지 가운데 정렬에 대해서는 두 발 뻗고 나머지 작업해야쥐