센터 정렬 Foundation 6 드롭 다운

Question

가로로 가운데 정렬 된 Foundation 6 드롭 다운을 표시하려고합니다. 툴팁으로 드롭 다운을 사용하려고합니다. 내 요구 사항에 더 잘 부합하고 툴팁이 아닌 풍부한 HTML을 삽입 할 수 있기 때문입니다.

파운데이션 6 드롭 다운은 .top .right .bottom .left 클래스를 추가하여 배치 할 수 있습니다. 이러한 클래스는 Foundation 핵심 Javascript로 파싱 된 다음 요소가 동적으로 계산 된 top: 및 left: 특성을가집니다.

이 때문에 요소에 left 또는 transform: translate 속성을 추가하면 Foundation에서 위치 지정 속성을 동적으로 계산할 때이를 고려해야한다는 사실에 의해 무효화됩니다.

자바 스크립트에 다른 클래스를 작성하는 데 부족한 아이디어가 있습니까?

Answer 1

text-center을 사용하십시오.

<ul class="dropdown menu" data-dropdown-menu> 
     <li> 
      <a href="#">Item 1</a> 
      <ul class="menu text-center"> 
       <li><a href="#">Item 1A</a></li> 
       <li><a href="#">Item 1b</a></li> 
       <li><a href="#">Item 1c</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li> 
    </ul>