要让标题和副标题在垂直方向上排列,可以使用CSS的flexbox布局。以下是一种实现方式:
HTML结构:
<div class="title-container">
<div class="title">这是标题</div>
<div class="subtitle">这是副标题</div>
</div>
CSS样式:
.title-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
}
.subtitle {
font-size: 18px;
color: gray;
}
在上述代码中,我们使用了display: flex;
来创建一个flex容器,并使用flex-direction: column;
将子元素(标题和副标题)垂直排列。align-items: center;
用于使子元素水平居中对齐,text-align: center;
则用于使子元素内部文本居中对齐。
这样,你就可以在Vue应用中生成一个垂直排列的标题和副标题了。同样,你可以根据需要自定义样式,并在Vue组件中使用该代码片段。