如何根据第二个容器对齐第一个容器？

Question

下面是我的 html 和 CSS 代码。当前的 和我想要的 带有红色。

.product-detail-container {
  display: flex;
  flex-direction: column;
  /* width: 97%; */
  max-width: 1200px;
  align-self: center;
  justify-content: center;
  margin: 2.5rem 5%;
}

.product-detail-container .path {
  font-size: 1.1rem;
  font-family: var(--fontCommon);
  display: flex;
  color: black;
}
.product-detail-container .path a:hover {
  text-decoration: underline;
  color: black;
}
.product-detail-container .photo {
  width: 45%;
}

.product-detail-container .photo img {
  width: 100%;
  border: 1px black solid;
}

.description {
  display: flex;
  margin-left: 2rem;
  flex-direction: column;
}

<div class="product-detail-container">
  <div class="path">
    <a class="path" href="/index.html">All products/</a>
    <p class="path" id="path-product-title">product-title</p>
  </div>
  <div style="display: flex; margin-top: 30px; justify-content: center">
    <div class="photo" id="product-photo">
      <img src="/assets/products/1.jpg" class="photo" />
    </div>
    <div class="description">
      <p class="product-title" id="product-title">product-title</p>
      <p class="product-id" id="product-id">product-id</p>
      <p
        class="product-price"
        id="product-price"
        style="margin-top: 2vh">
        product-price
      </p>
    </div>
  </div>
</div>

我想让“所有产品/巧克力”路径与其下面的照片对齐，但我需要将所有元素保留在 .product-detail-container CENTER 内。如何实现？

Answer 1

从内联样式中删除

justify-content: center

可修复

path

和

product-detail

对齐。一旦完成，您就可以将

<div class="product-detail-container">

对齐到您想要的位置。请参阅下面的片段。我还在元素中添加了边框以使其更易于查看。

.product-detail-container {
  display: flex;
  flex-direction: column;
  /* width: 97%; */
  max-width: 1200px;
  align-self: center;
  justify-content: center;
  margin: 2.5rem 5%;
  border: 1px solid black;
}

.product-detail-container .path {
  font-size: 1.1rem;
  font-family: var(--fontCommon);
  display: flex;
  color: black;
  border: 1px solid green;
}

/* to fix vertical alignment */
.product-detail-container .path-item {
  margin: 5px 0;
}

.product-detail-container .path-item a:hover {
  text-decoration: underline;
  color: black;
}

/* moved inline style to this class */
.product-detail {
  display: flex;
  margin-top: 30px;
  border: 1px solid red;
  /* justify-content: center */
}

.product-detail-container .photo {
  border: 1px solid cyan;
  width: 45%;
}

.product-detail-container .photo img {
  width: 100%;
  border: 1px black solid;
}

.description {
  display: flex;
  margin-left: 2rem;
  flex-direction: column;
  flex-grow: 1; /* added this */
  border: 1px solid blue;
}

<div class="product-detail-container">
  <div class="path">
    <a class="path-item" href="/index.html">All products/</a>
    <p class="path-item" id="path-product-title">product-title</p>
  </div>
  <div class="product-detail">
    <div class="photo" id="product-photo">
      <img src="/assets/products/1.jpg" class="photo" />
    </div>
    <div class="description">
      <p class="product-title" id="product-title">product-title</p>
      <p class="product-id" id="product-id">product-id</p>
      <p
        class="product-price"
        id="product-price"
        style="margin-top: 2vh">
        product-price
      </p>
    </div>
  </div>
</div>