카테고리 없음

[CSS] 수직 정렬 : 하단;

행복을전해요 2021. 1. 24. 07:42

대체 접근 방식은 어떻습니까?

깡깡이

HTML

<div class='table'>
    <div class='row'>
            <div class='cell'>
                        <div>ABOUT</div>
                                </div>
                                        <div class='cell'>
                                                    <div>PHOTOGRAPHY</div>
                                                            </div>
                                                                    <div class='cell'>
                                                                                <div>DESIGN</div>
                                                                                        </div>
                                                                                            </div>
                                                                                            </div>
                                                                                            

CSS

html, body {
    height:100%;
        width:100%;
        }
        .table {
            display:table;
                width:100%;
                    height:100%;
                        font-size: 60px;
                            font-family:'Bebas Neue', arial, helvetica, sans-serif;
                            }
                            .row {
                                display:table-row;
                                }
                                .cell {
                                    display:table-cell;
                                        text-align: left;
                                            position:relative;
                                            }
                                            .cell:nth-child(1) {
                                                background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
                                                    background-size: cover;
                                                    }
                                                    .cell:nth-child(2) {
                                                        background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
                                                            background-size: cover;
                                                            }
                                                            .cell:nth-child(3) {
                                                                background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
                                                                    background-size: cover;
                                                                    }
                                                                    .cell > div {
                                                                        position:absolute;
                                                                            bottom:0;
                                                                            }
                                                                            


출처
https://stackoverflow.com/questions/22019805