html - 如何缩小 div 以适应自动换行的文本

Question

我有一个 flex 容器，旁边有图片和文本。此容器位于页面中央。当我缩小导致文本自动换行的页面时，容器看起来不再居中，因为文本 div 不会缩小到自动换行文本的大小。

是否可以在发生自动换行时缩小文本div？

参见 JSFiddle here .

可能很难看清我在用代码片段谈论什么，因为您可能无法将页面缩小到足以看到换行的程度。最好看看 jsfiddle。

.container,
.content {
  display: flex;
  justify-content: center;
}
.picture {
  height: 130px;
  width: 130px;
  background-color: blue;
}
.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.name {
  font-size: 22px;
}

<div class="container">
  <div class="content">
    <div class="picture"></div>
    <div class="text">
      <div class="name">John Jacobjingleheimer</div>
    </div>
  </div>
</div>

Answer 1

我不确定这是否是您正在寻找的答案，但通过阅读您写的内容，我认为您正在寻找

margin-left: auto;
margin-right: auto;

上面的margin-left:和margin-right:加上auto值会导致浏览器窗口自动计算左右边距

.text {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  justify-content: center;
}