让文本显示在 text-align: center 的左侧和右侧答案

【问题标题】：Getting text to display to the left and right of a text-align: center让文本显示在 text-align: center 的左侧和右侧
【发布时间】：2013-08-20 10:27:46
【问题描述】：

好的，我有

    <div id='1'></div>
    <div id='2'></div>
    <div id='3'></div>

每个 div 中只有一个词。我希望每个 div 的宽度都是自动的

我想使用 text-align: center; 将 #2 中的单词放在屏幕中间； #1 中的单词直接显示在 #2 的左侧，而 #3 直接显示在 #2 的右侧。

我一直在尝试不同的 css，但没有效果。

希望有人有一个简单的答案。

【问题讨论】：

有人正确回答了您的问题吗？

标签： html css

【解决方案1】：

只需将所有 div 浮动到左侧。它们将按顺序显示。

<style>
  .my-dvis {
    float:left;
    width:33.33%;
    margin:0;
    padding:0;
    border:none;
  }
</style>

<div class="my-divs"></div>

<div class="my-divs"></div>

<div class="my-divs"></div>

【讨论】：

我还会添加 ID 标签并进行文本对齐。
没有像我喜欢的那样工作codepen.io/jakeschievink/pen/dxfsH 我希望第一个和最后一个 div 紧跟在中间的单词之后
不，我想将第一个和最后一个 div 中的文本直接放在中间文本的前后，而不是粘在屏幕的左右两侧。
@invot 它看起来像我想要的那样，但是每当您在 codepen 中的单词中添加字符时，它都无法正确显示，因此如果您将单词“two”更改为“pleasant”，那么它换行。

【解决方案2】：

text-align: center 仅适用于内联元素。

jsfiddle

HTML

<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>

CSS

body { text-align: center; }

div { display: inline-block; }

【讨论】：

这很接近，但我希望宽度取决于所显示单词的大小，而不是百分比。当我在您的示例中将宽度设置为自动时，它会中断。
这个解决方案有什么问题？
@gp 我上面提到的，如果这个词很长，它会溢出 .middle 中定义的宽度而不是居中，并且 .right 直接显示在 .middle 的右侧跨度>

【解决方案3】：

您是否尝试过向左浮动 id=1 和向右浮动 id=3？

【讨论】：

没有像我喜欢的那样工作codepen.io/jakeschievink/pen/dxfsH 我希望第一个和最后一个 div 紧跟在中间的单词之后

【解决方案4】：

我建议你使用<span>标签而不是div标签，因为div有一个带width 100%的属性。

或者如果你想使用 div 标签然后在下面的庄园中使用

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<style>
div{
float:left;
width:33.3%;
}
</style>

【讨论】：

这不会显示所描述的单词。我希望#1 中的单词直接位于#2 中单词的左侧。这会在屏幕的最左侧显示 #1。