如何将一个div对齐到另一个div的中间
[英]How to align a div to be exactly under the middle of another div
问题描述
我必须列出数据，一个带有dates的 id，另一个带有nums的 id。 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应该 go 向右，因为它应该正好在 9 月中旬。 我不需要像素的东西，比如边距和左右。 因为数字可能会改变，但它必须仍然在它的日期中间。 谢谢
3 个解决方案
解决方案1
2 已采纳 2022-08-09 10:28:12
如果您不能使用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
您可以将两个 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
也许这就是你要找的。
我都以 tekst 为中心。 因此，无论月份大小，他总是以它为中心。
#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>
如何将一个内容 div 对齐到中间，另一个对齐到底部？
[英]How can I align one content div to the middle and another to the bottom?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.