float:left 요소를 사용하여 가운데 정렬하기 > HTML,CSS,레이아웃

본문 바로가기

검색취소

float:left 요소를 사용하여 가운데 정렬하기

검색 이전 다음 목록

본문

일반적인 코딩시 가운데 정렬은 크게 문제 되지 않는다.

text-align:center;

margin:0 auto;

를 사용하면 대부분 원하는 정렬을 할수 있다.

그러나 가운데 정렬 속성이 float 정렬 속성을 만나면 float의 속성을 따라가 버리기 때문에 문제가 복잡해 진다.


해결책은 두가지가 있는데

첫째는 컨텐츠의 넓이가 비교적 정확히 정해져 픽셀값으로 뽑아낼수 있는 경우,

<div id="top" style="margin:0 auto; width:300px;">
 
    <div style="float:left">타이틀</div>

    <div style="float:left">본문</div>

</div>

라는 식으로 해결한다.

둘째는 컨텐츠의 넓이가 유동적일 경우, 대표적으로 브라우져의 사이즈가 다양한 모바일웹을 구현할 경우
가로넓이를 특정짓는것이 불가능할때 아래와 같이 적용한다.

<div>
<ul id="test">
    <li>아이유</li>
    <li>효느님</li>
    <li>수지</li>
    <li>리지</li>
    <li>돼지</li>
</ul>
</div>


div{margin:0 auto; width:80%(원하는 넓이의 % 대입);}

#test {
    float: right;
    position: relative;
    left: -50%;
}

#test li {
    float: left;
    position: relative;
    left: 50%;

 

힘들지만 해결..

 

추천 0

등록된 댓글이 없습니다.

검색취소

HTML,CSS,레이아웃

검색
  • no image
  • CSS : 반응형 웹(Responsive Web)

     CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

  • no image
  • CSS 글 자간 줄간 설정방법

    CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

  • #5cf039 헥스 색상 코드
  • #5cf039 헥스 색상 코드

    첨부파일

    #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

  • CSS 레이아웃... Copy & Paste
  • CSS 레이아웃... Copy & Paste

    첨부파일

    오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

  • XHTML+CSS 레이아웃 디자인 예제
  • XHTML CSS 레이아웃 디자인 예제

    첨부파일

    XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

    *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

?>