Question

我有一个Flex容器，旁边有图片和文字。此容器以页面为中心。当我缩小页面导致文本自动换行时，容器不再看起来居中，因为文本div不会缩小到单词包装文本的大小。

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

参见JSFiddle here。

可能很难看到我正在讨论的内容，因为您可能无法缩小页面以查看换行。最好看看jsfiddle。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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;
}

如何缩小div以适应单词包装的文本

1 个答案: