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

Question

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

我需要问这个问题，因为每当我在跨度中放置文本对齐时，它都不起作用。

span {
  text-align: center;
}

<span>
This is span.
</span>

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

在显示：表之前还有：

内联块和伪：

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

Answer 3

2
投票

只需添加显示块：

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

Answer 4

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

例如

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

CSS

p { text-align:center;}

Answer 5

尝试使用div

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

Answer 6

span

是一个内联元素。这意味着当它包含文本时，它采用文本宽度，而不是全宽度。您可以将其放在

div

父级中并给 div

text-align: center

，您可以给它

display:inline-block

并将宽度设置为 100%。

Answer 7

如果你想让你的跨度在整个屏幕上居中，请使用 CSS

Flexbox

来做到这一点，将你的跨度包裹在一个 div 中：

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

应用此CSS

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

在

<p>

中使用跨度，而不是单独使用。

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

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

7个回答

最新问题

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

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

7个回答

最新问题

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