Question

我想使文本居中一点，但是即使我添加向左填充的 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>

Answer 2

在您的 reviews__content 类上使用width: calc(50% - 2px);。

我认为这可以解决您的问题。

Answer 3

我用以下代码修复了该问题：

.reviews__content {
    width: 50%;
    padding-left: 600px;
    text-align: center;
    justify-content: center;
    padding-top: 170px;
    position: absolute;
}

我想将文本居中一点，但是它跳到了新行

3 个答案: