Question

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

这是我的代码：

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

Answer 1

使跨度成为div并且它将起作用（我只给了容器width和border，以便您可以更好地看到效果）：

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

DEMO HERE

Answer 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>

Answer 3

你需要文本对齐：在div中居

请参阅此 jsfiddle CSS

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

Answer 4

这是因为你从未为div定义宽度。所以文本居中，因为div只与文本一样宽。尝试给div一个50％的宽度（或者你想要的宽度）然后应用text-align：center。

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

Answer 5

设置span：span作为span标记

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

Answer 6

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

将文本中心对齐在右浮动div中

6 个答案: