使标题文本垂直对齐底部

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属性显示到表格单元格，然后垂直对齐到底部。喜欢..

body {
	color: white;
}

.navbar {
	margin-bottom: 0;
	border-radius: 0;
  padding-bottom: 0;
}


.row.content {
	min-height: 450px
}


#about {
	background-color: red;
}

#img {
	background-color: gray;
	height 100%;
  object-fit: contain;
}

#howto {
	background-color: #003300;
}

#imgcont {
      
       overflow: hidden;
       height: 400px;
       max-height: 400px;
       position: relative;
}



#imgcont .img-responsive {
	      display: flex;
        width: 100%;
        height: auto;
        position: absolute;
    }


.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
}

.title h1 {
	text-transform: uppercase;
	margin: 0;
	font-size: 3rem;
	white-space: nowrap;
}