有没有办法让跨度到文档的中心

Question

有没有办法使用 css 使 span 标签移到中心？

我需要问这个问题，因为每当我在 span 中放置 text-align 时，它都不起作用。

span {
  text-align: center;
}

<span>
This is span.
</span>

Answer 1

如果你想让你的跨度在整个屏幕上居中，使用 CSS Flexbox 来做到这一点，把你的跨度包裹在 div:

<div>
  <p><span>This is span.</span></p>
</div>

应用这个CSS

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

不单独在 <p> 中使用 span。

Answer 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>

或使用flexbox

span {
  display: flex;
  justify-content: center;
}

<span>
this is a span
</span>

并查看 inline_elemets

Answer 3

span 是一个内嵌标签。如果你想让它居中，它需要在一个块元素中。

例如

<p><span>This is span</span></p>

CSS

p { text-align:center;}

Answer 4

是的，这是启动画面吗？

弹性

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 之前有：

table显示：

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>

Answer 5

span 是内联元素。这意味着当它包含文本时，它采用文本宽度，而不是全宽。您可以将它放在 div 父级中并给定 div text-align: center 并且您可以给它 display:inline-block 并将宽度设置为 100%。

Answer 6

尝试使用 div

<body>
<style>
    #Whosebug{
        text-align: center;
    }
</style>
<div id="Whosebug">
    <span>
        Test
    </span>
</div>

Answer 7

只需添加显示块：

span {
    text-align:center;
    display:block;
}

有没有办法让跨度到文档的中心

Is there a way to make the span go to the center of document

html

css

text-align