조회 수 258 추천 수 0 댓글 0

DIV 가로 중앙 정렬, 세로 중앙 정렬
코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다. 

 

display:flex;  이 코드를 알고 나서 정말 쉽게 코딩이 가능해졌다.
바깥쪽 div, 즉 부모 div에 display:flex; 를 선언하면. 안쪽 엘리먼트, 즉 자식div에 영향을 준다.  

반응형 레이아웃을 작업할 때 유용하게 쓸수 있는 css입니다.

 

사이트선택 전용 레이아웃을 코딩할때 사이트제목2개를 중앙에 배치하는 부분이 무척 힘들었었는데

display:flex; 코드를 사용하니 쉽게 구현이 가능해 졌다.

 

<style>

.bl-left { position:relative; float:left; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }
.bl-right { position:relative; float:right; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }

.bluelight { position: relative; display: table; width: 150px; height: 150px; }

.bluelight a { display: table-cell; vertical-align: middle;text-align: center; }

</style>

 

        <div class="bl-left">
            <span class="bluelight">
                <a href="#">MH</a>
            </span>
        </div>
        <div class="bl-right">
            <span class="bluelight">
                <a href="#">Moon</a>
            </span>
        </div>

 

위의 코딩으로 완성된 사이트제목2개의 가로,세로 정렬 모습입니다.select.jpg

[샘플보기]

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 158
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 302
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 357
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 455
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 160
» DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 258
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 92
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 202
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 376
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 295
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 219
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1235
45 반응형 CSS 테이블 file 팔공산 2017.06.13 633
44 실시간 환율조회 html file 팔공산 2017.04.18 651
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 5167
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 1082
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 370
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1367
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 281
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11947
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...