如何将一个 div 对齐到另一个 div 正中间的下方

Question

如何将一个 div 对齐到另一个 div 正中间的下方

3

我有两个数据列表，一个的id是dates，另一个的id是nums。日期和数字的字母数不相等，那么如何使nums中的每个

都恰好位于dates下面呢？

#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 应该向右移动，因为它应该恰好位于九月中间的下方。我不需要像边距、左右之类的像素值。因为数字可能会变化，但它必须仍然位于其日期的中心下方。谢谢。

- Mehan Alavi

1

认真使用 table，它会更简单。 - Paulie_D

3个回答

-1

您可以将两个div的宽度设置为相等，然后将它们都变成flexbox，通过将这些属性应用于它们两个：

    #dates {
        width: 300px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
    }

    #nums {
        width: 300px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
    }
    
    div div {
        flex: 1;
        text-align: center;
    }

<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>

- Blye

-1

也许这就是你要找的。

我将文本居中对齐，所以无论月份的大小如何，它始终保持居中对齐。

#dates div{
    display: inline-block;
    text-align: center;
    width: 20vw;
}
#nums div{
    display: inline-block;
    position: relative;
    margin-top: 10px;
    text-align: center;
    width: 20vw;
}

<body>
   <div>
    <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>
   </div>
</body>

- Minimumspace

这个可以运行。但这不是我需要的东西。我需要nums在dates的中间下方。 - Mehan Alavi

抱歉，我看错了，请等一下。 - Minimumspace

现在它应该按要求居中了。 - Minimumspace

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

如果您无法使用表格（但是您应该使用表格），请使用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>