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 标签等内联元素没有任何影响。您需要将文本对齐应用到 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