각각 div로 이루어진 버튼들을 td 안에서 수평,수직 가운데 정렬(align) 하기

By | 9월 18, 2012

* html 코드

<!-- 버튼들이 위치할 td -->
<td>
     <!-- 버튼들을 한 덩어리로 묶는 div --> 
    <div class="inGridBtns">
        <!-- 버튼들. background 이미지로 버튼임을 표현함 --> 
        <div onclick="a()"></div>
        <div onclick="b()"></div>
        <div onclick="c()"></div>
    </div>
</td>

* css 코드

.inGridBtns
display:inline-block; /* inline-block이어야 자식객체의 내용에 따라 가변적인 크기를 가질 수 있다. */
cursor:pointer; 
height: 16px /* 버튼의 height의 근사치로 입력해야 버튼에 fit되어 수직 가운데 정렬이 된다. */
}

/* IE7(호환성보기)에서 inline-block이 작동하지 않으므로 hack을 사용하여 inline-block 구현 */ 
*:first-child+html
.inGridBtns{
display:inline; zoom:1
}

.inGridBtns div{
float:left /* block 속성 엘리먼트의 정렬은 float를 사용한다. */
}

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments