html - 如何将一个div对齐到另一个div的中间

标签 html css alignment inline text-align

我必须列出数据,一个 ID 为 dates,另一个 ID 为 nums。 date 和 num 中的字母数不相等,那么我如何才能将 nums 中的每个 div 都恰好放在日期之下?

#dates div{
    display: inline-block;
    margin-left: 20px;
}
#nums div{
    display: inline-block;
    margin: 30px;
    position: relative;
    top:-20px;
}
<body>
    <div id="dates">
        <div>Aug 5</div>
        <div>Aug 6</div>
        <div>Aug 7</div>
        <div>September 12</div>
    </div>
    <div id="nums">
        <div>9</div>
        <div>7</div>
        <div>5</div>
        <div>3</div>
    </div>
</body>

例如,此处 3 应该向右移动,因为它应该恰好在 9 月的中点下方。 我不需要边距和左右像素之类​​的东西。因为 nums 可能会改变,但它必须仍处于日期的中间。 谢谢

最佳答案

如果您不能使用表格(而您应该),请使用 CSS 表格。

div {
  text-align: center;
  padding: 1em;
  border: 1px solid red;
}

#nums,
#dates {
  display: table-row;
}

.showwidth {
  display: table-cell;
}
<div id="dates">
  <div class="showwidth">Aug 5</div>
  <div class="showwidth">Aug 6</div>
  <div class="showwidth">Aug 7</div>
  <div class="showwidth">September 12</div>
</div>
<div id="nums">
  <div class="showwidth">9</div>
  <div class="showwidth">7</div>
  <div class="showwidth">5</div>
  <div class="showwidth">3</div>
</div>

关于html - 如何将一个div对齐到另一个div的中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73289683/

相关文章:

jquery - 使用 jQuery-UI 的简单可拖动 DIV

performance - 如何防止 HTML5 音频在加载时预下载/流式传输?

css - 如何仅在 border-top 上使用 border-image?

html - 如何在不使用 "position"和 "margins"的情况下创建三个重叠层

html - 如何使段落 block 中的文本垂直居中?

ios - 在 iOS UIAlertController 中,我们可以左对齐 UIAlertAction 的文本吗

html - Div 不是 100% 在框架内

javascript - 如何在另一个动画完成后激活一个动画

html - 将图像对齐到与文本右对齐相同的边距

javascript - Express js 外部 javascript 文件未加载