css 글자 수직정렬

말자아이콘 전체게시물 작성일15-02-11 08:57 조회2,786회

본문

1)

CSS에서 수직 정렬을 할 때 사용하는 속성은 vertical-align입니다.
그런데 vertical-align 속성은 인라인 요소(<a>, <img> 등)와 테이블(<th>, <td>)에만 사용할 수 있고
블록 레벨 요소에는 사용할 수 없습니다.

 

그래서 메뉴와 같이 한 줄로 표시되는 경우에는 line-height 속성을 사용해서 수직 정렬을 합니다.

 

.gnb>ul>li>a{
    display:block; width:100%; height:100%;
    font:bold 13px/50px "맑은 고딕", arial;
    text-align:center; color:#fff; background:#C09;
}

  
2-1)

width 속성에 %로 지정한 값은 부모 요소의 width 값을 기준으로 비율이 정해집니다.

부모 요소인 #wrap가 900px이므로, .gnb의 width:100%는 곧 width:900px과 같습니다.

 

먼저 메뉴인 .gnb 요소를 #wrap 위쪽으로 뺍니다.

 

<div class="gnb">
...
</div>
<div id="wrap">
...
</div>

 

그리고 스타일을 아래와 같이 수정합니다.

 

.gnb{
    background:#000; margin:15px 0;
}

.gnb>ul{
    width:900px; height:50px; margin:0 auto;
}

 

2-2)

메뉴인 .gnb는 현재 위치에 그대로 두고 하는 방법도 있습니다.

 

먼저, 아래와 같이 스타일을 수정합니다.

 

.gnb{
    position:absolute; width:100%; left:0; top:15px; background:#000;
}

.gnb>ul{
    width:900px; height:50px; margin:0 auto;
}

 

그러면 .gnb는 레이어가 되어 페이지의 흐름과는 상관 없이 left와 top에서 지정한 위치에 놓이게 됩니다. 그런데 이렇게 하면 #wrap요소가 .gnb 요소 아래에 놓이게 되어 #wrpa 요소의 일부가 가려지게 됩니다. 그래서 추가로 body 위쪽에 여백을 주어 #wrap 요소 전체가 보이도록 합니다.

 

body{
    font-size:12px;
    font-family:"맑은 고딕", arial;
    margin-top: 80px;
    background-color: #CCC;
}

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 2 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 233 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 191 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 230 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 191 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 209 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 272 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 146 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 563 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 188 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 143 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 276 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1765 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 2127 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1361 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 인기글관련링크 무료아이콘 전체게시물 01-17 5108 추천: 15
게시물 검색