html - 如何使用 HTML CSS 对齐容器 div 中子 div 的 2 个 super 子 div

Question

我在一个程序中有两个查询。

查询1:我正在尝试在容器 div 的子 div 内水平对齐两个子 super 子分区。下面是我的代码，你能帮我解决这个问题吗？我已附上所需的输出。

查询2:从代码中你可以看到圆圈内有一个段落日，我希望它从圆圈的中心开始，例如如果天数为1，则应该从中心开始显示，并且当有3位数字的天数时应在中心进行调整。希望您能理解我的疑问。

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
}
.container-meta {
  position: relative;
}
.container-meta .left {
  float: left;
}
.container-meta .right {
  float: right;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
}

<div class="container-meta">
<div class="left">
<div class="circle">
    <p>days</p>
    <p>hours</p>
 </div>
 <div class="date">
    <p>today-date</p>
    <p>tomorrow-date</p>
 </div>
</div>   
<div class="right">
    <p>text1</p>
    <p>text2</p>
    <p>text3</p>
</div>
</div>

当前输出:

预期输出:

Answer 1

您可以通过为左侧类提供 display:flex; 并为其中一个 div 提供一些边距来实现此目的。

.circle {
  height: max-content;
  width: max-content;
  border-radius: 50%;
  padding: 5%;
  text-align: center;
  border-color: black;
  border-style: solid;
}

.container-meta {
  position: relative;
}
.container-meta .left {
  float: left;
  display: flex;
}
.container-meta .right {
  float: right;
}
.right p,
.left p {
  padding: 0;
  margin: 0;
  width:max-content;
}

.date {
  margin-left: 5px;
}

<div class="container-meta">
  <div class="left">
    <div class="circle">
      <p>days</p>
      <p>hours</p>
    </div>
    <div class="date">
      <p>today-date</p>
      <p>tomorrow-date</p>
    </div>
  </div>
  <div class="right">
    <p>text1</p>
    <p>text2</p>
    <p>text3</p>
  </div>
</div>