有没有办法让跨度转到文档的中心[重复]答案

【问题标题】：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 对于我正在创建的其他项目也是一个很好的选择，所以我将来会使用它。

标签： html css text-align

【解决方案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>
    #stackoverflow{
        text-align: center;
    }
</style>
<div id="stackoverflow">
    <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。

【讨论】：