我希望在文本中有一个内联div，以便div包含两行垂直对齐的文本。
最初的解决方案：
div.chinese-word {
display: inline-block;
}
div.chinese-word div {
text-align: center;
}This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div
然而，每当我把它放在p段中时它就会被打破。 （可能不是唯一的情况）。
无效！
div.chinese-word {
display: inline-block;
}
div.chinese-word div {
text-align: center;
}<p>This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div</p>
它甚至没有通过验证。我发现p必须只包含内联元素，所以我切换到跨度。但无论我使用什么造型，我都无法获得相同的结果。
span.chinese-word {
display: inline-block;
}
span.chinese-word span {
text-align: center;
}<p>This is a Chinese word <span class="chinese-word"><span>wǒ</span><br/><span>我</span></span> in an inline span</p>
显然，跨度中的文本不再是水平居中的。 （两条线看起来都是左对齐的。）
p元素可能有自己的样式，所以我不想操纵它，而是需要独立于上下文的解决方案。
答案 0 :(得分：2)
鉴于您的小提琴，请将ProductID替换为<div>并将CSS更新为以下内容：
<span>给出我相信你的效果。
答案 1 :(得分：2)
您已在span.chinese-word上设置<br>，从而走上了正确的轨道。如果您删除换行符（display: block;），并将span.chinese-word span添加到/* Your example */
span.chinese-word-previous {
display: inline-block;
}
span.chinese-word-previous span {
text-align: center;
}
/* Fixed */
span.chinese-word {
display: inline-block;
}
span.chinese-word span {
display: block;
text-align: center;
}，则文字会再次居中：
Your example:
<p>This is a Chinese word <span class="chinese-word-previous"><span>wǒ</span><br><span>我</span></span> in an inline div</p>
<br>
<br>
Fixed:
<p>This is a Chinese word <span class="chinese-word"><span>wǒ</span><span>我</span></span> in an inline div</p>vector< vector<int> > *te = new vector< vector<int> >();
(*te)[0].push_back(10);
cout << (*te)[0][0];