HTML跨度对齐中心不起作用？

107

我有一些HTML：

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div正在更改文档上的间距，因此我想为此使用跨度。

但是span并没有集中内容：

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

我该如何解决？

编辑：

我完整的代码：

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— 大卫19801
source

1

您的div是“更改间距”吗？这是什么意思而且您的span不会，因为默认情况下它是一个内联元素，而div是一个块级元素。

— Bojangles

您好JamWaffles，用“间距”表示div在内容上方和下方添加了空间。跨度不执行此操作。

— David19801 2011年

使用Firebug或Chrome检查器查看将哪些CSS规则应用于您的元素，然后查找添加填充或边距的规则。周围的元素也可能具有填充/边距。

— Bojangles

5

text-align=center应该是text-align:center

— n611x007'8

197

div是一个块元素，它将跨越容器的宽度，除非设置了宽度。跨度是一个内联元素，内部将具有文本的宽度。当前，您正在尝试将align设置为CSS属性。对齐是一个属性。

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

但是，不建议使用align属性。您应该text-align在容器上使用CSS 属性。

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— 将
source

46

请使用以下样式。margin:auto通常用于居中对齐内容。display:table需要span元素

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— 克里斯·J
source

37

align不推荐使用该属性。改用CSS text-align。另外，除非您使用display:block或display:inline-block为宽度设置一个值，否则跨度将不会使文本居中，但是它的行为与div（块元素）相同。

您可以张贴一个布局示例吗？使用www.jsfiddle.net

— 路西法·萨姆（Lucifer Sam）
source

很棒！谢谢。

— dallinchase 2014年

我不能在保持两个内联元素不变的情况下对齐它们吗？

— Daniel Springer

10

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

对我来说，效果很好。也试试这个

— 目标
source

2

除了所有其他解释之外，我相信您使用的是"="等号，而不是冒号":"：

<span style="border:1px solid red;text-align=center">

它应该是：

<span style="border:1px solid red;text-align:center">

— Nhazean
source

1

Span是内联代码块，可调整为内联文本大小，其坚韧程度阻止了大多数根据内联上下文样式化的工作。为了简化布局样式（限制冲突），请将div添加到带有换行符的'p'标签中。

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— 马克·斯图尔特
source

-7

只需word-wrap:break-word;在CSS中使用。有用。

— 周一
source