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

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 标签这样的内联元素没有任何影响。您需要将 text-alignment 应用到display:block;类似于 the<div>或<p>包裹 span 的父元素上。

使用这样的方法可能会更好：

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>默认为 beingdisplay:inline;而<div>默认为 being display:block;。