html - 我想让文本稍微居中，但它跳到一个新行

Question

我想让文本稍微居中，但在我添加 padding-left 的 1px 后，它会跳到一个新行。我有 2 列都占据了屏幕的 50% 宽度，其中 1 列只是照片，2 种背景颜色和我想要居中的文本。

这是我的 CSS:

.reviews__content {
    display:flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    padding-left:
}

Answer 1

将 box-sizing: border-box; 添加到您的代码中。这将帮助您添加填充而不破坏它

.reviews__content {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: center;
  padding-left: 10px;
  box-sizing: border-box;
}

<div class="reviews__content">
  <img src="https://www.w3schools.com/w3css/img_forest.jpg" />
  <p>Text</p>
</div>