Question

我不确定为什么文本不会在标题类范围中居中。

<div id="vid_display">
 <span class="title">SampleText</span></br>
 <span class="desc">Sample Desc</span>
</div>

样式表

#vid_display {
height: 500px;
width: 700px;
box-shadow: 10px 10px 5px #888;
}

.title {
font-family: cursive;
font-size: 20px;
font-style: bold;
text-align: center;
}

Answer 1

text-align对内联元素（如span标记）没有任何影响。您需要将文本对齐应用于display:block;的父元素，例如包裹范围的<div>或<p>。

你可能会对这样的事情感觉更好：

<强> HTML

<div id="vid_display">
 <p class="title">SampleText</p>
 <p class="desc">Sample Desc</p>
</div>

<强> CSS

.title { text-align: center; }

更新：以下是工作示例：http://codepen.io/anon/pen/jEnys

Answer 2

是内联元素，而不是块。改为使用div：

<div id="vid_display">
  <div class="title">SampleText</div><br>
  <span class="desc">Sample Desc</span>
</div>

Answer 3

使用

 <div class="title">SampleText</div></br>

<span>标记用于对文档中的内联元素进行分组。 <span>标记本身不提供视觉更改。 <span>默认为display:inline;，而<div>默认为display:block;。

为什么span标签中的文本不居中？

3 个答案: