在右浮动 div 中对齐文本中心答案

【问题标题】：align text center in a right floated div在右浮动 div 中对齐文本中心
【发布时间】：2014-04-30 14:26:06
【问题描述】：

我有一个具有 css 样式 float:right 的 div。问题是，我想将 div 中的一些文本对齐到中心。但是，文本始终位于左侧。我使用 text-align:center 但它没用。我很感激任何帮助。谢谢！

这是我的代码：

<div style='float:right'>
     <span style='text-align:center'>some text...</span>
</div>

【问题讨论】：

标签： css

【解决方案1】：

您必须将 display:block; 设置为 span 元素 .. 这是一个 fiddle

【讨论】：

【解决方案2】：

对于text-align:center 浮动div 内的文本，宽度的宽度应大于包含元素。例如：假设您的span 标签有一些占据100px 的文本。当您将float 父元素left 或right 时，它将相应地浮动并以100px 为宽度，因为您没有为其指定宽度。所以为它指定一个width，在你的情况下，div 是向左浮动的。

试试这个：

<div style='float:right; width:200px; text-align:center;background:red;'>
     <span style='text-align:center'>some text...</span>
</div>

您可以删除background-color，因为我提供了它以供参考。

或

您甚至可以为要居中对齐的元素指定宽度。在您的情况下，由于span 是一个内联元素，您必须指定一个width 并给它display:block

<div style='float:right; background:red;'>
     <span style='text-align:center; width: 200px; display:block;'>some text...</span>
</div>

【讨论】：

与display:block 的跨度是个坏主意
@Pilot 是的，你是对的。只是为了知道，如果我们在其他情况下使用 span 类作为块，例如在 inline 元素中设置一些图标或其他东西，会不会很好？
No...img is replaced inline element ..您可以为此目的使用块元素，例如div ..不要将span设置为block element..display:table更有效.

【解决方案3】：

你需要在 div 中设置 text-align:center

看到这个jsfiddle css

div
 {
float: right;
width: 200px;
height: 200px;
border: solid 1px;
text-align:center;
}

【讨论】：

【解决方案4】：

这是因为您从未为 div 定义过宽度。所以文本居中，因为 div 只和文本一样宽。尝试为 div 设置 50% 的宽度（或者你想要的宽度），然后应用 text-align:center。

<div style='float:right;width:50%;text-align:center;'>
 <span>some text...</span>

【讨论】：

【解决方案5】：

设置显示：span标签的块

<div style="float: right; width: 200px; height: 200px; border: 1px solid gray;">
     <span style="text-align: center; display: block;">some text...</span>
</div>

【讨论】：

【解决方案6】：

把span做成一个div就可以了（我只是给容器一个width和一个border，这样你可以更好的看到效果）：

<div style='float:right; width:200px; border:1px solid #000'>
    <div style='text-align:center'>some text...</div>
</div>

DEMO HERE

【讨论】：