css - HTML span align center无法正常工作?
我有一些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>
David19801 asked 2019-08-13T12:02:58Z
7个解决方案
172 votes
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>
38 votes
请使用以下样式。 margin:auto
通常用于居中对齐内容。 span
元素需要display:table
<span style="margin:auto; display:table; border:1px solid red;">
This is some text in a div element!
</span>
26 votes
不推荐使用align
属性。 请改用CSS text-align
。 此外,除非您使用display:block
或display:inline-block
并为宽度设置值,否则跨度不会使文本居中,但它的行为与div(块元素)相同。
你能发布一个布局的例子吗? 使用www.jsfiddle.net
8 votes
span.login-text {
font-size: 22px;
display:table;
margin-left: auto;
margin-right: auto;
}
<span class="login-text">Welcome To .....CMP</span>
对我而言,它运作良好。 试试这个
0 votes
Span是内联块并调整为内联文本大小,其强度可阻止大多数内联上下文的样式。 要简化布局样式(限制冲突),请将div添加到&#39; p&#39; 标记与换行符。
<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
-1 votes
除了所有其他解释之外,我相信您使用相同的"="
标志,而不是冒号":"
:
<span style="border:1px solid red;text-align=center">
它应该是:
<span style="border:1px solid red;text-align:center">
-5 votes
只需在css中使用word-wrap:break-word;
即可。 有用。