关于导航栏按钮居中的问题

lswq

导航栏的按钮在themes中调整一直无法居中，想问问各位有没有什么方法~

 /* 移动导航栏至下端 */
      .header {
        top: auto !important;
        justify-content: center; /* 水平居中 */
        bottom: 0px !important;
        box-shadow: var(--footer-shadow);
        height: var(--header-height) !important;
      }     
      /* 导航栏按钮大小及去除选中底纹 */      
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important; /* 隐藏选中横线 */
        --mdc-icon-size: 26px; /* 图标大小 */
        display: flex;
        justify-content: center;
        overflow-x: auto; /* 允许水平滚动 */
        margin-left: 0 auto;
        margin-top: 15px; /* 上端距离大小 */
        height:var(--header-height) !important;
      }  

复制代码

zhanfu86

楼主卡片能否分享下？

lswq

zhanfu86 发表于 2023-9-27 14:57
楼主卡片能否分享下？

卡片是mushroom，你论坛搜这个关键词有很多帖子，我也是抄的别人的

zhanfu86

lswq 发表于 2023-9-27 18:07
卡片是mushroom，你论坛搜这个关键词有很多帖子，我也是抄的别人的

我看了你这个，特别喜欢。 可惜自己对页面排版的能力确实很差。

lswq

zhanfu86 发表于 2023-9-27 19:45
我看了你这个，特别喜欢。 可惜自己对页面排版的能力确实很差。

https://bbs.hassbian.com/thread-22464-1-1.html

weiweistudio

刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：config\themes\minimalist-ios-tapbar\minimalist-ios-tapbar.yaml
2. 修改主题文件CSS，在 #tabsContent 下添加 text-align: center；
3. 重新加载主题：开发者工具-服务-重新加载主题

# Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
        text-align: center; }

复制代码

lswq

weiweistudio 发表于 2023-10-5 18:07
刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：conf ...

牛逼兄弟，受教了~

lswq

weiweistudio 发表于 2023-10-5 18:07
刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：conf ...

老哥 更新到2024.01 minimalist的移动导航栏失效了是需要改点什么吗

lswq

lswq 发表于 2024-1-4 16:36
老哥 更新到2024.01 minimalist的移动导航栏失效了是需要改点什么吗

已解决 最新cadmod 3.4版本下需改为

      /* 调整页面顶端距离 */        
      ha-app-layout, div#view {
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        padding-bottom: var(--header-height) !important;
      }
      /* 移动导航栏至下端 */
      app-header, div.header {
        top: auto !important;
        justify-content: center; /* 水平居中 */
        bottom: 0px !important;
        box-shadow: var(--footer-shadow);
        height: var(--header-height) !important;
      }     
      /* 导航栏上端距离 */        
      app-toolbar, div.toolbar {
        height: var(--header-base-height) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
      }

复制代码