如何将一个div对齐到另一个div的中间
[英]How to align a div to be exactly under the middle of another div
问题描述
I have to lists of data, one with id of dates and other one with id of nums .
我必须列出数据，一个带有dates的 id，另一个带有nums的 id。 The number of letters in date and num is not equal so how Can I put each of divs in nums be exactly under dates? 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>
For example, in here 3 should go to right because it should be exactly down of the middle of september.例如，这里3应该 go 向右，因为它应该正好在 9 月中旬。 I don't need pixel things like margin and left and right.我不需要像素的东西，比如边距和左右。 because the nums may change but it must still be in the down of middle of it's date.因为数字可能会改变，但它必须仍然在它的日期中间。 Thanks谢谢
3 个解决方案
解决方案1
2 已采纳 2022-08-09 10:28:12
If you can't use a table (and you should), use CSS Tables.如果您不能使用table （并且应该），请使用 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>
解决方案2
0 2022-08-09 09:54:00
You could set the width of both divs to be equal and then make them both flexboxes by applying these properties to both of them:您可以将两个 div 的宽度设置为相等，然后通过将这些属性应用于它们来使它们成为弹性框：
#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>
解决方案3
0 2022-08-09 10:06:34
Maybe this is what your looking for.也许这就是你要找的。
I both centered the tekst.我都以 tekst 为中心。 So no matter what size the month is he always center it.因此，无论月份大小，他总是以它为中心。
#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.