조회 수 23752 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

DIV내에 있는 문자열을 수평 중앙 정렬하는 방법은 text-align을 사용해 간단히 해결된다. 아래의 예를 살펴보자.

 

<style>
.h-arrange {
    width: 200px;
    height: 100px;
    border: 1px solid yellow;
    background-color: yellow;

    text-align: center;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -60px;
}
</style>
  
<div class="h-arrange">문자열 수평/중앙정렬</div>

 

3-1.png

 

조심해야 할 점은 text-align은 Block요소안에 있는 Inline요소에만 반영(선언은 해당 Block요소에 한다.)된다. 만일 block요소를 중앙정렬하기 위해서는 반드시 display: inline;등을 사용하여 Inline요소로 변환 후 사용해야 정확한 중앙정렬이 가능하다.

 

우선 많은 사람들이 자주 사용하는 display: table;과 display:table-cell;을 이용하는 방법을 알아보자. 이를 사용하기 위해서는 부모/자식의 형태로 해당 컨텐츠를 구성하여야 한다.

 

<style>
.toTable {
display: table;
    width: 200px;
    height: 100px;
    border: 1px solid yellow;
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

.echo {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>

<div class="toTable">
    <p class="echo">문자열 수평/수직/중앙정렬</p>
</div>

 

 

3-2.png

 

이때 조심해야 될 부분은 아래와 같다.

 

    1. 부모요소엔 display: table;을, 자식요소엔 display:table-cell;을 적용해야한다. (display:table; 대신 display: inline-table; 사용가능)

    2. 부모요소는 크기가 명확히 표시되어야 한다. (height, width등의 값이 반드시 있어야한다.)

    3. IE7 이하 버전에서는 display:table, table-cell이 지원되지 않기 때문에 적용되지 않는다.

 

?
  • ?
    KKMS 2016.02.29 21:55

    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .main{
        display: inline-block;
        border: 1px solid red;
    }
    .menu {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border: 0px solid yellow;
        border-radius: 50px;
        text-align: center;
        line-height: 100px;    
    }
    .subMenu {
        width: 300px;
        height: 100px;
        background-color: gray;
        line-height: 100px;    
    }
    .posLeft {
        float: left;

    }
    .posRight {
        float: right;
    }
    </style>

    <dl class="main">
        <dt class="menu posLeft">소주 안주</dt>
        <dd class="subMenu posRight">족발, 골뱅이</dd>  
    </dl>

    <dl class="main">
        <dt class="menu posRight">맥주 안주</dt>
        <dd class="subMenu posLeft">치킨, 피자</dd>
    </dl>

    <dl class="main">
        <dt class="menu posLeft">양주 안주</dt>
        <dd class="subMenu posRight">치즈, 스테이크</dd>
    </dl>

     

    ----------------------------------------

     

    질문 할 것 - line-height방식의 문제점과 해결방안은? 내일중 새 토픽준비 할 것


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 128222
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 71079
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53274
» HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 23752
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19387
36 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19014
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16318
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15230
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13531
32 HTML Form 요소 설명 4 2016.06.01 11643
31 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10311
30 HTML li 에 대해 알아보자. 2 file 2016.02.15 10200
29 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10172
28 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 9945
27 SASS Sass 소개 2019.09.19 9643
26 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8405
25 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 8197
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7086
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6605
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6016
Board Pagination Prev 1 2 3 Next
/ 3