使标题文本垂直对齐底部

Question

从标题文本中删除 nowrap 后，我想将其置于底部 我正在尝试将 vertical-align: bottom 放在任何地方，但没有成功。 这是第一列与顶部对齐的示例。

.ui-grid-cell-contents {
 ....

  vertical-align: bottom;
}

http://plnkr.co/edit/JzJVRgjz2VLELcqcdR4I?p=preview

如何使angular-ui-grid中的标题文本位于底部？

Answer 1

我认为问题在于您的 ui-grid-cell-contents 中的高度

试试下面...

.ui-grid-header-cell-label
{
  line-height:48px;
  vertical-align:bottom;
}

Answer 2

旧帖子，但在 v4.0.6 中，这将包装标题文本并底部对齐：

/* To make the header cell text wrap */
.ui-grid-header-cell .ui-grid-cell-contents {
     height: 48px;
     white-space: normal;
     -ms-text-overflow: clip;
     -o-text-overflow: clip;
     text-overflow: clip;
     overflow: visible;
}

/* To bottom align the header text */
.ui-grid-cell-contents .ui-grid-header-cell-primary-focus {
    position: relative;
}
.ui-grid-header-cell-label {
    display: block;
    position: absolute;
    bottom: 3px;
}

Answer 3

首先让父标签css属性显示到表格中。然后子标签（标题内容标签）使css属性显示到表格单元格，然后垂直对齐到底部。喜欢..

div[role="columnheader"] {
    display: table;
    width: 100%;
}

.ui-grid-header-cell .ui-grid-cell-contents {
    height: 58px;
    /* white-space: normal !important; */
    /* -ms-text-overflow: clip; */
    /* -o-text-overflow: clip; */
    /* text-overflow: clip; */
    /* overflow: visible; */
    /* text-align: center; */
    display: table-cell;
    vertical-align: bottom;
}