1. 웹표준
  2. HTML5
  3. HTML/CSS
  4. 코드박스
  5. CSS3
  6. CSS 위키
  7. CSS 네이밍
  8. 부트스트랩
  9. jQuery
조회 수 13347 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
Extra Form
layout_li_inline.png

위와 같이 <li> 태그를 화면 가운데에서 가로로 정렬시키고 싶을 때
float:left 속성을 사용하면 리스트가 화면 가운데가 아닌 왼쪽에 붙어버린다.
그래서 이 때에는 float 속성이 아닌 display:inline 속성을 사용해주면 가로로 정렬이 된다.

<style>
#sitebar {text-align:center;}
#sitebar li {display:inline;}
</style>
<div id="sitebar">
<ul>
<li>ABOUT</li>
<li>BLOG</li>
<li>GUESTBOOK</li>
</ul>
</div>

  • ?
    이온디 2009.02.10 06:22
    단순히 레이어를 정렬시키고자 할 때에도 다음과 같이 하시면 됩니다.
     <style>
    #sitebar {text-align:center;}
    #sitebar span {display:inline;}
    </style>
    <div id="sitebar">
      <span>ABOUT</span>
      <span>BLOG</span>
      <span>GUESTBOOK</span>
    </div>



List of Articles
번호 1제목 날짜 조회 수
35 CSS 들여쓰기 text-indent 2014.02.11 935
34 CSS Round 속성 둥근 테두리 2014.02.11 664
33 select박스에 css적용시키고 싶을때 2014.02.02 833
32 ie7에서 display inline-block 사용하기 2014.01.22 808
31 CSS의 display 속성 2013.12.20 1253
30 input disabled checked 상태선택자 (css, style) 2013.12.09 1233
29 CSS만 이용하여 멋진 스크롤바 만들기 (크롬) file 2013.11.30 1911
28 모던 브라우저 input의 커서이동 시 노란테두리의 없애기 2013.08.24 1501
27 table-cell 2013.08.15 1938
26 Shadow Box 레이어 만들기 (섀도우박스) file 2013.08.08 1870
25 초기화 코드 file 2013.08.04 2393
24 Using Calc() Function 2013.03.04 2496
23 CSS로 table의 bordercolorlight 와 bodercolordark 값 표현하기 2013.02.09 2462
22 curve-drop shadow 효과 1 2012.12.13 3368
21 CSS, radio버튼, Checkbox 세로 정렬 1 2012.11.30 5440
20 이미지를 흑백으로 표현하기 2 2010.07.06 7143
19 스크롤에 영향을 받지 않고 화면에 고정된 레이어 2 2009.02.19 11198
18 font 속성 2009.02.09 7725
17 알파 필터 적용하기 투명(filter:alpha)효과 (익스,파폭,오페라) 2009.01.30 11354
» li 항목을 화면 가운데에서 가로로 정렬시키고 싶을 때 1 1 file 2009.01.29 13347
Board Pagination ‹ Prev 1 2 Next ›
/ 2

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5