如何将元素与垂直线对齐

【问题标题】：How to align elements to vertical line如何将元素与垂直线对齐
【发布时间】：2021-07-30 11:58:00
【问题描述】：

我正在尝试建立一个网站，但遇到了问题。我需要将 div 框中的元素对齐到垂直线。图片中的东西（不要质疑我的绘画技巧）

这是我的代码：

<div class="main-block">
    <div class="sub-block">
        <a class="part1">(light gray block)</a>
        <a class="part2">(dark gray block)</a>
    </div>
</div>

我需要将.part1 和.part2 保留在.sub-block div 中。

【问题讨论】：

标签： html css alignment vertical-alignment text-alignment

【解决方案1】：

表格布局可以这样做：

.main-block {
  display:table;
}
.sub-block {
  display:table-row;
}

.sub-block > * {
  display:table-cell;
  padding:10px;
}
.part1 {
  text-align:right;
}

<div class="main-block">
    <div class="sub-block">
        <a class="part1">aaa</a>
        <a class="part2">bb</a>
    </div>
    <div class="sub-block">
        <a class="part1">a a aaaaa</a>
        <a class="part2">b</a>
    </div>
    <div class="sub-block">
        <a class="part1">aaaaaaaaaaaaa</a>
        <a class="part2">(dark gray block)</a>
    </div>
    <div class="sub-block">
        <a class="part1">a</a>
        <a class="part2">bbbbbbbbbb</a>
    </div>
</div>

【讨论】：