根据其他DIV元素对DIV的对齐

发布于 2025-02-12 11:11:47 字数 992 浏览 0 评论 0 原文

我在对齐两个divs中遇到问题，这些div包含在父级内部。这是当前对齐方式的样子：

但是，我希望每个字母都可以对齐每个字母与每个DIV相比，每个DIV都以自己的长度为中心。

这是与图片关联的HTML和CSS。任何帮助将不胜感激！

.inner {
    resize:none;
    width: 100%;
    height: 100%;
    background-color: rgb(200, 200, 200);
    border-radius: 20px;
    align-items: center;
}
.days {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}
.nums {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}

<div class="inner">
    <div class="days">
    </div>
    <div class="nums">
    </div>
</div>

原文

I am having a problem aligning two divs which are contained inside of a parent div. This is currently what the alignment looks like:

However, I would like each letter to be aligned which each number as opposed to each div being centered by their own lengths.

Here is the HTML and CSS associated with the picture. Any help is greatly appreciated!

.inner {
    resize:none;
    width: 100%;
    height: 100%;
    background-color: rgb(200, 200, 200);
    border-radius: 20px;
    align-items: center;
}
.days {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}
.nums {
    resize:none;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
}

<div class="inner">
    <div class="days">
    </div>
    <div class="nums">
    </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏大泽ㄣ 2025-02-19 11:11:47

仅使用CSS网格会更容易。

创建一个7列网格，其中：网格 - 拼写 - 列重复（7，value）;

仅具有与列中最大内容一样宽，您可以使用 min-content 。

要中心文本，您只需使用``text-align：center''

.inner {
  display: grid;
  grid-template-columns: repeat(7, min-content);
  grid-gap: 10px;
}

.inner > span {
  text-align: center;
}

<div class="inner">
  <!-- days -->
  <span>S</span>
  <span>S</span>
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  
  <!-- nums -->
  <span>25</span>
  <span>26</span>
  <span>27</span>
  <span>28</span>
  <span>29</span>
  <span>10</span>
  <span>1</span>
</div>

Would be way easier to just use CSS Grid.

Create a 7 column grid with: grid-template-columns repeat(7, value);

To have the columns only as wide as the largest content within the column you can use min-content.

To center the text you just use `text-align: center´

.inner {
  display: grid;
  grid-template-columns: repeat(7, min-content);
  grid-gap: 10px;
}

.inner > span {
  text-align: center;
}

<div class="inner">
  <!-- days -->
  <span>S</span>
  <span>S</span>
  <span>M</span>
  <span>T</span>
  <span>W</span>
  <span>T</span>
  <span>F</span>
  
  <!-- nums -->
  <span>25</span>
  <span>26</span>
  <span>27</span>
  <span>28</span>
  <span>29</span>
  <span>10</span>
  <span>1</span>
</div>

回复收藏 0 原文

~没有更多了~