段落沒有以影像為中心-有解無憂

該段落未以影像為中心。寬度是文章類的 80%，但它從文章類的開頭開始。影像通過父類文章屬性 Display lex 和 justiy-content center 很好地居中。你能幫我解決這個問題嗎？謝謝。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: poppins;
}

.articles {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.article {
  width: 500px;
  background-color: wheat;
  display: block;
  justify-content: center;
  text-align: center;
  border: black 2px solid;
}

.article img {
  width: 80%;
}

.article p {
  width: 80%;
  background-color: gray;
}

<!DOCTYPE html>
<html>

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

<body>
  <div class="articles">
    <div class="article">
      <img src="/imgs/article (1).jpg" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae assumenda omnis officiis numquam illo explicabo.</p>
    </div>
    <div class="article">
      <img src="/imgs/article (2).jpg" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae assumenda omnis officiis numquam illo explicabo.</p>
    </div>
    <div class="article">
      <img src="/imgs/article (3).jpg" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae assumenda omnis officiis numquam illo explicabo.</p>
    </div>

  </div>
  <div class="articles">
    <div class="article">
      <img src="/imgs/article (4).jpg" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae assumenda omnis officiis numquam illo explicabo.</p>
    </div>
    <div class="article">
      <img src="/imgs/article (5).jpg" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae assumenda omnis officiis numquam illo explicabo.</p>
    </div>
  </div>

</body>

</html>

uj5u.com熱心網友回復：

在CSS 中添加邊距.article p

.article p {
  width: 80%;
  background-color: gray;
  margin: 0 auto;
}

uj5u.com熱心網友回復：

試試看：

在 CSS 更改(.article) 中：

.article {
  width: 500px;
  background-color: wheat;
  display: flex; /* instead block */
  flex-direction: column; /*added */
  align-items: center; /*added */
  text-align: center;
  border: black 2px solid;
}

段落沒有以影像為中心

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398096.html

標籤：html css

下一篇：防止填充增加大小