图片不允许相邻 div 正确对齐

Question

我正在设计一家在线服装店，在产品页面上，我希望产品信息（右侧）与图像中心（左侧）对齐，同时 divs 以页面为中心。然而，似乎无论我做什么，产品信息总是被推到图像的底角。它在图像被完全删除时起作用，但除非发生这种情况，否则 CSS 中的格式不会影响产品信息 div.

我试过将元素向左浮动，但这否定了使它们居中的文本对齐方式，并且我对产品信息所做的任何填充、边距或尺寸更改只会添加到底部div 而不是向上移动。可能有一些明显的东西被我忽略了，但我已经研究这个问题很长时间了，似乎找不到解决办法。

有人可以帮我吗？

> Screenshot of how it looks <

* {
  margin: 0px;
  padding: 0px;
}

.product {
  text-align: center;
}

.product-view {
  top: 40px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
}

#product-image {
  width: 400px;
  height: 40%;
  min-width: 40%;
  min-height: 40%;
  padding: 20px;
}

.product-info {
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

#product-name {
  font-size: 25px;
  text-transform: uppercase;
  text-align: left;
}

#product-price {
  font-size: 20px;
  padding: 20px 0px;
  text-align: left;
}

.product-info hr {
  width: 278px;
  opacity: 0.4;
}

#product-sizes {
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
}

#size-radio-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 15px;
  border: 1px solid black;
  margin: 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 40px;
  color: black;
  cursor: pointer;
}

#add-to-cart {
  width: 278px;
  height: 40px;
  margin: 0 5px;
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 15px;
  float: left;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="content">
    <div class="product">
      <div class="product-view">
        <img id="product-image" src="/Media/hoodieblack.png">
      </div>
      <div class="product-info">
        <div id="product-name">
          <h3>Hoodie - Black</h3>
        </div>
        <div id="product-price">
          <p>.00</p>
        </div>
        <hr>
        <div id="product-sizes">
          <label for="size-select">Size</label>
          <div id="size-select">

            <input type="radio" name="size" value="s" hidden id="s-size">
            <label for="s-size" id="size-radio-btn">S</label>

            <input type="radio" name="size" value="m" hidden id="m-size">
            <label for="m-size" id="size-radio-btn">M</label>

            <input type="radio" name="size" value="l" hidden id="l-size">
            <label for="l-size" id="size-radio-btn">L</label>

            <input type="radio" name="size" value="xl" hidden id="xl-size">
            <label for="xl-size" id="size-radio-btn">XL</label>

            <input type="radio" name="size" value="xxl" hidden id="xxl-size">
            <label for="xxl-size" id="size-radio-btn">XXL</label>

          </div>
        </div>
        <button type="button" id="add-to-cart">Add to Cart</button>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

只需将 display: flex; 添加到主要父级，在本例中为 .product。然后你可以使用 align-items: center; 让它们彼此一致。

您还可以将 max-width: 100%; 添加到图像，以便相应地调整大小。

* {
  margin: 0px;
  padding: 0px;
}

.product {
  text-align: center;
}

.product-view {
  top: 40px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
}

#product-image {
  width: 400px;
  height: 40%;
  min-width: 40%;
  min-height: 40%;
  padding: 20px;
}

.product-info {
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

#product-name {
  font-size: 25px;
  text-transform: uppercase;
  text-align: left;
}

#product-price {
  font-size: 20px;
  padding: 20px 0px;
  text-align: left;
}

.product-info hr {
  width: 278px;
  opacity: 0.4;
}

#product-sizes {
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
}

#size-radio-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 15px;
  border: 1px solid black;
  margin: 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 40px;
  color: black;
  cursor: pointer;
}

#add-to-cart {
  width: 278px;
  height: 40px;
  margin: 0 5px;
  cursor: pointer;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 15px;
} 

.product {
  display: flex;
  align-items: center;
  justify-content: center;
}

#product-image {
  max-width: 100%;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <div class="content">
    <div class="product">
      <div class="product-view">
        <img id="product-image" src="https://dummyimage.com/800/000/fff">
      </div>
      <div class="product-info">
        <div id="product-name">
          <h3>Hoodie - Black</h3>
        </div>
        <div id="product-price">
          <p>.00</p>
        </div>
        <hr>
        <div id="product-sizes">
          <label for="size-select">Size</label>
          <div id="size-select">

            <input type="radio" name="size" value="s" hidden id="s-size">
            <label for="s-size" id="size-radio-btn">S</label>

            <input type="radio" name="size" value="m" hidden id="m-size">
            <label for="m-size" id="size-radio-btn">M</label>

            <input type="radio" name="size" value="l" hidden id="l-size">
            <label for="l-size" id="size-radio-btn">L</label>

            <input type="radio" name="size" value="xl" hidden id="xl-size">
            <label for="xl-size" id="size-radio-btn">XL</label>

            <input type="radio" name="size" value="xxl" hidden id="xxl-size">
            <label for="xxl-size" id="size-radio-btn">XXL</label>

          </div>
        </div>
        <button type="button" id="add-to-cart">Add to Cart</button>
      </div>
    </div>
  </div>
</body>

</html>

图片不允许相邻 div 正确对齐

Image not allowing neighboring div to align correctly

html

css

flexbox

alignment