顶部垂直对齐 div css答案

【问题标题】：Top vertical align div css顶部垂直对齐 div css
【发布时间】：2018-06-18 22:27:44
【问题描述】：

我不知道父元素的高度。我使用垂直对齐子 div：

position:  absolute;
top: 50%;
transform: translateY(-50%);

如何在 top10%-part 中以相同的方式对齐 div？子 div 应该在垂直 10% 的父 div 之后开始。

.text-image.flag {
  width: 25px;
  height: 25px;
  position: absolute;
  margin-left: 0px;
  margin-right: 0px;
  top: 50%;
  transform: translateY(-50%);
  float: right;
  right: -5px;
  background: url(/flag.png) 0 0 no-repeat;
}

<td class="firstColumn wide-cell index-cell tall-cell sorting_1">
  <div class="inner-wrapper" style="position: relative;">
    <div class="table-tooltip" index="7">
      <a href="">
        <div class="text-image">
          Real, Student
        </div>
        <div class="text-image flag"></div>
      </a>
    </div>
  </div>
</td>

我想要来自firstColumn 的前 10%，而不是来自内部包装器。

【问题讨论】：

请添加有关您正在寻找的内容的更多详细信息并添加您的 HTML 标记，以便我们为您提供帮助。
写作位置：绝对；前10名％;应该这样做
@cornel.raiu top 如果未定义父高度将不起作用
是的，top 不起作用。父母没有身高
我需要和上面写的一样，但不是居中对齐，而是前 10%

标签： css vertical-alignment

【解决方案1】：

您可以在所有相关代码周围添加一个<div id="container>，并将其样式设置为position: relative;，这样您就可以在子div 上使用position: absolute;，因为绝对定位仅在其父级非静态定位时才有效。

【讨论】：

【解决方案2】：

我想这会对你有所帮助。

.parent {
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
    display: table;
}
.child {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

<div class="parent">
	<div class="child">
		This is content.
	</div>
</div>

【讨论】：