CSS centering:horizon+vertical

 <div class="container pr-text-container">
        <div class="pr-table-cell">
                <p class="content">언론보도</p>
                <a class="link" href="#">보러가기</a>
                <p class="content">동영상</p>
                <a class="link" href="#">보러가기</a>
        </div>
    </div>
.pr-text-container{
    display: table;
}
.pr-table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

RESULT :

CENTERING.png

COMMENT :

a element 경우에도 vertical-align이 먹히지 않으므로,
1. div element 안에 삽입하거나
2. a 의 line-height 를 설정하면
vertical-align을 지정할 수 있다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s