首页 > web前端 > css教程 > 如何在水平无序列表 () 内垂直居中列出项目 ()?

如何在水平无序列表 () 内垂直居中列出项目 ()?

DDD
发布: 2024-10-31 21:13:29
原创
833 人浏览过

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中文网其他相关文章!

      来源:php.cn
      本站声明
      本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
      热门教程
      更多>
      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板