有没有办法让跨度转到文档的中心[重复]
Posted
技术标签:
【中文标题】有没有办法让跨度转到文档的中心[重复]【英文标题】：Is there a way to make the span go to the center of document [duplicate] 【发布时间】：2021-02-10 23:01:31 【问题描述】：有没有办法让span标签使用css移动到中心？
我需要问这个问题，因为每当我将 text-align 放在 span 中时，它都不起作用。
span
text-align: center;
<span>
This is span.
</span>【问题讨论】：
将您的<span> 替换为<div>。默认情况下，span 是一个 inline element 但你想要 block level element 的行为，@987654325 @ 是默认的。
出于个人原因，我想使用 span 而不是 div。
我认为 div 对于我正在创建的其他项目也是一个很好的选择，所以我将来会使用它。
【参考方案1】：
是的，那是为了启动画面吗？
弹性html
display: grid;
min-height: 100vh;
body
margin: auto;
<span>
This is span.
</span>html
display: flex;
min-height: 100vh;
body
margin: auto;
<span>
This is span.
</span>在 flex 之前有：
表格展示：html
display: table;
height: 100%;
width:100%;
body
display:table-cell;
vertical-align:middle;
text-align:center;
<span>
This is span.
</span>在 display:table 之前还有：
inline-block 和伪：html,
body
height: 100%;
width: 100%;
margin: 0;
text-align: center;
body:before
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
<span>
This is span.
</span>【讨论】：
【参考方案2】：span 标签是一个内联元素，因此您可以设置display: inline-block 和width
span
display: inline-block;
width: 100%;
text-align:center;
<span>
This is span.
</span>或者你可以用块元素包裹它：
div
text-align:center;
<div>
<span>
This is span.
</span>
</div>或使用弹性盒
span
display: flex;
justify-content: center;
<span>
this is a span
</span>看看inline_elemets
【讨论】：
这也有帮助，我想我可以出于各种原因使用所有三个选项。 @sur 是的，我也这么认为。当您需要span 标记内联但设置宽度或其他内容时，您可以使用 inline-block 。当您需要轻松对齐时，您可以使用 flex。当你还需要对齐其他东西时，你可以用块元素将它包裹起来。【参考方案3】：
只需添加显示块：
span
text-align:center;
display:block;
【讨论】：
【参考方案4】：span 是一个内联标签。如果你想让它居中，它需要在一个块元素中。
例如
<p><span>This is span</span></p>
CSS
p text-align:center;
【讨论】：
【参考方案5】：尝试使用 div
<body>
<style>
#***
text-align: center;
</style>
<div id="***">
<span>
Test
</span>
</div>
【讨论】：
【参考方案6】：span 是一个内联元素。这意味着当它包含文本时，它采用文本宽度，而不是全宽。你可以把它放在 div 父级中，给 div text-align: center，你可以给它display:inline-block 并将宽度设置为 100%。
【讨论】：
【参考方案7】：如果您想在整个屏幕中居中显示 span，请使用 CSS Flexbox 执行此操作，将 span 包装在 div 中：
<div>
<p><span>This is span.</span></p>
</div>
应用此 CSS
div
display: flex;
align-items: center;
justify-content: center;
不要单独在 <p> 中使用 span。
【讨论】：
以上是关于有没有办法让跨度转到文档的中心[重复]的主要内容，如果未能解决你的问题，请参考以下文章