Question

我的问题是，当我使用text-align: center;时，我的文字居中，但“p”元素没有调整大小以适应文字。

在下面的例子中，我们可以看到“p”元素比文本本身要大得多，我希望它完全适合文本，因为我希望文本对着绿色边框（但仍然居中在它的“p”）。

我怎么能这样做？

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

div {
  border: 2px black solid;
}

p {
  text-align: center;
  display: block;
  
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
}

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

Answer 1

经过修补，我找到了以下解决方案：

将内部div设置为flex-shrink : 1，以便缩小
将p设置为display : table-caption（我甚至不知道这个存在）

＆＃13;

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

div {
  border: 2px black solid;
  flex-shrink: 1;
}

p {
  text-align: center;
  display: table-caption;
  
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
}

＆＃13;

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

＆＃13;

Answer 2

这是不可能的，因为p元素，即使你将它设置为display: inline-block，一旦文本换行就会占用父宽度的100％（即，如果没有width设置它）。但试着四处，我想出了一个版本，可能对你有用。关键是它有内外包装，inline和inline-block显示的组合和外包装中的padding。也许它可以帮助你...

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

.outer_wrapper {
  border: 2px black solid;
  text-align: center;
  padding: 30px;
}

.inner_wrapper {
  display: inline-block;
  background-color: yellow;
}

p {
  display: inline;
  font-family: "Times New Roman";
  font-size: 16px;
}

<div id="container">
  <div class="outer_wrapper">
    <div class="inner_wrapper">
      <p>Small text</p>
    </div>
  </div>
  <div class="outer_wrapper">
    <div class="inner_wrapper">
      <p>This is another small paragraph</p>
    </div>
  </div>
</div>

Answer 3

在你的样式表中，＃container有一个宽度：270px ---任何你有固定宽度的原因

我建议，删除它，如果不需要或将其更改为100％并显示：block;

你也可以将div元素设置为 - div {width：50％; border：2px black solid;}

Answer 4

这是你想要的吗？我删除了flexbox，然后显示inline-block。另请注意，p标记会自动附加margin。

#container {
  border: 2px green solid;
}

div {
  border: 2px black solid;
  display: inline-block;
}

p {
  text-align: center;
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
  margin:0;
}

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

如何在框中获得尽可能小的居中文本

4 个答案: