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

问题描述

是否可以使用CSS使span标签移动到中心？

我需要问这个问题，因为每当我将span放在text-align中时，它都行不通。

span {
  text-align: center;
}

<span>
This is span.
</span>

解决方法

span标签是一个内联元素，因此您可以设置<p>和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;
}

并查看inline_elemets

是的，是用于启动屏幕吗？

flex

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

内联代码块和伪代码：

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>

span是一个内联元素。这意味着，当包含文本时，它将采用文本宽度，而不是全角。您可以将其放在div父级中，并赋予div text-align: center，然后将其赋予display:inline-block，并将宽度设置为100％。

只需添加显示块：

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

如果您要使跨度在整个屏幕中居中，请使用CSS salutation <- function(sex,name){if (sex == "M"){x <- "Mr."} else {if (sex == "F"){x <- "Ms."}} {paste0("Greetings",sex,name,",How are you today?")} } salutation("M","Bailey")来完成，将跨度包装在div中：

Flexbox

应用此CSS

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

不要单独在div { display: flex; align-items: center; justify-content: center; }中使用跨度。

span是嵌入式标记。如果要使其居中，则需要将其放置在block元素中。

例如

<span>
this is a span
</span>

CSS

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

尝试使用div

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

html text-align