更改材料2 md工具栏高度

Question

我有一个<md-toolbar>，我想改变他的身高。

<md-toolbar color="primary">Cards</md-toolbar>

我只是在我的component.scss中尝试了这个：

md-toolbar {
  height: 50px !important;
  min-height: 50px !important;
}

但文本填充错误（顶部空间比底部空间大得多）：

我尝试将padding和margin设置为0，但它没有做出任何更改。

我的问题

1. 如何调整恼人的空间，使文本垂直居中？
2. 更新md-toolbar身高的更好方法吗？

Answer 1

我最终调整了工具栏下面的容器的边距，以匹配工具栏的高度，该高度对于桌面和移动设备如下所示...

    date        id
0   2018-01-01  emp_1
3   2018-01-02  emp_1
6   2018-01-03  emp_1
9   2018-01-04  emp_1
1   2018-01-01  emp_2
4   2018-01-02  emp_2
7   2018-01-03  emp_2
10  2018-01-04  emp_2
2   2018-01-01  emp_3
5   2018-01-02  emp_3
8   2018-01-03  emp_3
11  2018-01-04  emp_3

Answer 2

在文本中添加vertical-align: middle;应该垂直居中。

Answer 3

您可以使用Angular中的flex布局模块：

<md-toolbar fxLayout="row" fxLayoutAlign="space-between stretch"></md-toolbar>

Answer 4

工具栏中有一个默认的预定义行。您还需要更改该行的高度：

md-toolbar {
  height:  50px !important;
  min-height: 50px !important;

  md-toolbar-row {
    height: 50px !important;
  }
}

Answer 5

如果使用>>> word = "in_str" >>> list(enumerate(word, 1)) [(1, 'i'), (2, 'n'), (3, '_'), (4, 's'), (5, 't'), (6, 'r')] >>> [[i, char] for i, char in enumerate(word, 1)] [[1, 'i'], [2, 'n'], [3, '_'], [4, 's'], [5, 't'], [6, 'r']] ，则可以添加css文件

<mat-toolbar>