在p元素

Question

我希望在文本中有一个内联div，以便div包含两行垂直对齐的文本。

最初的解决方案：

＆＃13;

＆＃13;

div.chinese-word {
    display: inline-block;
}

div.chinese-word div {
    text-align: center;
}

＆＃13;

This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div

＆＃13;

＆＃13;

＆＃13;

然而，每当我把它放在p段中时它就会被打破。 （可能不是唯一的情况）。

无效！

＆＃13;

＆＃13;

div.chinese-word {
    display: inline-block;
}

div.chinese-word div {
    text-align: center;
}

＆＃13;

<p>This is a Chinese word <div class="chinese-word"><div>wǒ</div><div>我</div></div> in an inline div</p>

＆＃13;

＆＃13;

＆＃13;

它甚至没有通过验证。我发现p必须只包含内联元素，所以我切换到跨度。但无论我使用什么造型，我都无法获得相同的结果。

＆＃13;

＆＃13;

span.chinese-word {
    display: inline-block;
}

span.chinese-word span {
    text-align: center;
}

＆＃13;

<p>This is a Chinese word <span class="chinese-word"><span>wǒ</span><br/><span>我</span></span> in an inline span</p>

＆＃13;

＆＃13;

＆＃13;

显然，跨度中的文本不再是水平居中的。 （两条线看起来都是左对齐的。）

p元素可能有自己的样式，所以我不想操纵它，而是需要独立于上下文的解决方案。

Answer 1

鉴于您的小提琴，请将ProductID替换为<div>并将CSS更新为以下内容：

<span>

给出我相信你的效果。

https://jsfiddle.net/chrispickford/8n3hcvkL/3/

Answer 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; }，则文字会再次居中：

＆＃13;

＆＃13;

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>

＆＃13;

vector< vector<int> > *te = new vector<  vector<int> >();     
(*te)[0].push_back(10);      
cout << (*te)[0][0];

＆＃13;

＆＃13;

＆＃13;