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

问题描述 投票：0回答：8

我有一些 HTML：

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

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

但是跨度并没有集中内容：

<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
8个回答
239
投票

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

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

但是，align 属性已被弃用。您应该在容器上使用 CSS 

text-align
属性。

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

请使用以下样式。 

margin:auto
通常用于居中对齐内容。 
display:table
是 
span
元素

所必需的 
<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
43
投票

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

您可以发布您的布局示例吗？使用www.jsfiddle.net

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

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

对我来说效果非常好。也试试这个

3
投票

除了所有其他解释之外，我相信您使用的是等号

"="
，而不是冒号
":"
：

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

应该是：

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

Span 是内联块，可根据内联文本大小进行调整，其顽强性阻止了大多数在内联上下文之外设置样式的努力。要简化布局样式（限制冲突），请将 div 添加到带有换行符的“p”标签。

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

只需在CSS中使用，

display: flex; justify-content: center;
。

-10
投票

只需在CSS中使用

word-wrap:break-word;
即可。它有效。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.