1. 웹표준
  2. HTML5
  3. HTML/CSS
  4. 코드박스
  5. CSS3
  6. CSS 위키
  7. CSS 네이밍
  8. 부트스트랩
  9. jQuery
  10. 자바스크립트
조회 수 14474 추천 수 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
번호 제목 날짜 조회 수
19 스크롤에 영향을 받지 않고 화면에 고정된 레이어 2 2009.02.19 12151
18 font 속성 2009.02.09 8355
17 알파 필터 적용하기 투명(filter:alpha)효과 (익스,파폭,오페라) 2009.01.30 12252
» li 항목을 화면 가운데에서 가로로 정렬시키고 싶을 때 1 1 file 2009.01.29 14474
15 CSS reference 1 file 2009.01.28 4569
14 div 2009.01.01 4307
13 100% Height Layout Using CSS 2008.12.19 4833
12 인터넷익스플로러6.0 에서 border-style 투명으로 주기 file 2007.09.06 10098
11 폼 입력시 한글/영문 지정하기 2007.04.23 4726
10 CSS를 이용한 글씨 꾸미기 (only IE) 2007.04.19 5547
9 vertical-align : baseline 1 3 2007.04.17 6033
8 CSS 속성 2007.04.17 5382
7 id와 class 2007.04.14 4645
6 CSS 속성 2006.10.11 3739
5 웹폰트 사용하기 2005.03.10 4919
4 FONT class의 순서 2004.05.28 4537
3 배경색 지정 2004.05.07 4531
2 background: red url(http://www.user.com/sam.gif) 2004.05.07 4560
1 img 태그에서 직접 border=0 지정않고 class로 border=0 넣기 2003.08.09 5616
Board Pagination ‹ Prev 1 2 Next ›
/ 2

나눔글꼴 설치 안내


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

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

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5