>  기사  >  웹 프론트엔드  >  수평 정렬되지 않은 목록() 내부에 목록 항목()을 수직으로 가운데에 맞추는 방법은 무엇입니까?

수평 정렬되지 않은 목록() 내부에 목록 항목()을 수직으로 가운데에 맞추는 방법은 무엇입니까?

DDD
DDD원래의
2024-10-31 21:13:29758검색

How to Vertically Center List Items () Inside a Horizontal Unordered List ()?

수직 정렬

    • 의 수직 정렬 내의 요소 수평
        미학과 유용성을 위해 필요한 경우가 많습니다. 해결책은 다음과 같습니다.

        CSS를 사용하여

      • 높이와 동일한 요소는 아래와 같습니다.

        <code class="css">li {
            height: 30px;
            line-height: 30px;
        }</code>

        제공된 코드에서:

        • 높이는 100px입니다.
        • 버튼의 높이는 50px로 다릅니다(.button 클래스에 의해 제공됨).

        콘텐츠를 세로로 가운데에 배치하려면 다음 줄 높이를 추가해야 합니다. 스타일시트에 값을 추가합니다.

        <code class="css">.toolbar li {
            line-height: 100px; /* For regular list items */
        }
        .toolbar li.button {
            line-height: 50px; /* For button list items */
        }</code>

        이렇게 하면 모든 목록 항목과 해당 내용이 수직으로 중앙에 배치됩니다.

        위 내용은 수평 정렬되지 않은 목록() 내부에 목록 항목()을 수직으로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

  • 성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.