HTML/CSS - 가변 크기의 가운데 탐색 모음

사용자가 사진 갤러리를 통해 정렬 할 수있는 탐색 모음이 있습니다. 문제는 탐색 막대 너비가 갤러리의 크기에 따라 달라질 것입니다. 너비를 설정하지 않으면 여백을 사용할 수 없습니다. 0 자동; 메뉴를 가운데에 맞 춥니 다. (대신, 모든 갤러리 컨테이너의 왼쪽에 표시됩니다.) 여기 HTML/CSS - 가변 크기의 가운데 탐색 모음

는 HTML입니다 :

 <div id="nav_container"> 
      <div id="timeline_nav"> 
       <!--<a class="arrow left" />--> 
       <a class="toggle"/> 
       <a class="toggle"/> 
       <a class="toggle"/>    
       <a class="toggle"/> 
       <!--<a class="arrow right disabled" />--> 
      </div>   
     </div>

그리고 CSS :

#nav_container { width:100%;height:20px; position:absolute; bottom:10px; background-color:#000;} 
#timeline_nav { position:relative;margin:0 auto; } 
#timeline_nav a { display:block; float:left; cursor:pointer; overflow:hidden; } 
#timeline_nav a.toggle { width:4px; height:4px; padding:2px; margin:0 2px; background:url(http://images.apple.com/iphone/gallery/images/nav-ticks-20100607.png) 50% 0 no-repeat; }

모든 아이디어를 어떻게 해결 이?

출처

2011-03-10 Johnny Appal

당신은 디스플레이를 적용 할 수 있습니다 : 인라인 블록, 그리고 너비 (그것 doesnt 작동 n ie6 생각) 줄 것이다 .. 또한 당신이 그것을 그런 식으로 센터 수있는 갤러리에 대한 자바 스크립트를 사용하는 경우. – amosrivera

float: left;을 사용하고 있기 때문에 왼쪽으로 가고 있는데, 이는 정상적인 흐름을 벗어난 앵커를 가져옵니다. 당신이해야 할 일은 앵커를 display: inline-block;으로 설정하고 DIV의 내용을 가운데로 놓는 것입니다. IE6에서 원래 인라인 요소 인 inline-block을 지원하므로 모든 브라우저에서 지원되어야합니다.

출처

2011-03-10 22:40:43

이 경우 나의 선호하는 방법은 text-align: center;에 컨테이너 요소와 당신은 IE < 8 '인라인'을 표시하는 중심 요소를 설정해야합니다 당신이 display: inline-block;

에 중심 원하는 요소를 설정하는 것입니다;

#nav-container { 
    text-align: center; 
} 

#timeline-nav { 
    display: inline-block; 
    *display: inline; /* IE6 and IE7 hack */ 
}

는하지만 난 당신이 자바 스크립트에 의해 폭을 읽고 #nav_container에가 동적 추가 할 수

출처

2011-03-10 22:41:47 dianovich

그래서 에릭 마이어를 ... 해요. 그런 다음 컨테이너를 margin : 0 auto와 정렬 할 수 있습니다.

출처

2011-03-10 22:44:39 ChrisBenyamin

HTML/CSS - 가변 크기의 가운데 탐색 모음

답변

관련 문제