如何设置段落中垂直对齐和居中的两个跨度的样式

Question

我正在尝试在段落中创建“两行”内联 table。 js + class stack-block-br 可以，但我想知道有没有更好的方法。

这是我的尝试

var x = document.querySelector('.stack-block-br');
var s = document.querySelector('.stack-block-br > span');
var v = s.innerHTML.split('<br>');
var vlengths = v.map(x => x.length);
var iv = vlengths.indexOf(Math.max(...vlengths));
var vnewelement = document.createElement('span');
var h = s.offsetHeight;
vnewelement.innerHTML = v[iv];
var b = document.querySelector('body');
b.appendChild(vnewelement);
w = vnewelement.offsetWidth;
b.removeChild(vnewelement);
x.style.width = w + "px";
x.style.height = h + "px";

.stack {
  display         : inline-flex;
  flex-flow       : column;
  align-items     : center;
  justify-content : center;
}
.stack > * {
  width      : 100%;
  flex       : 1 100%;
  align-self : center;
}
.stack-block {
  display  : inline-block;
  position : relative;
}
.stack-block>span {
  float      : left;
  position   : absolute;
  text-align : center;
  }
.stack-block>span:first-child {
  top : -2em;
  }
.stack-block>span:last-child {
  top : -1em;
  }
.stack-block-br {
  display  : inline-block;
  position : relative;
  }
.stack-block-br>span {
  /*width    : 100%;*/
  float      : left;
  /*display  : inline-table;*/
  position   : absolute;
  text-align : center;
  bottom     : -0.2em;
  }

<p>
  class: stack
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

<p>
  class: stack-block
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-block">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

<p>
  class: stack-block-br
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-block-br">
      <span>&larr;<br>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

堆栈 class“有效”，但顶部跨度与段落中的文本对齐，我无法将顶部跨度置于底部居中。

堆栈块将底部与 p 的文本对齐，但没有宽度。

一些 javascript stack-block-br 作品。注意：我不能使用跨度的 offsetWidth，因为
returns 一个比实际宽度大得多的数字。

Answer 1

我创建了一个沙箱并在此处添加代码作为正确答案。

https://codesandbox.io/s/epic-water-gngdr?file=/index.html

span.stack-block {
  display    : inline-block;
  margin-top : 20px;
  max-height : 18px;
  }
.stack-block > span {
  display     : inline-flex;
  flex-flow   : column nowrap;
  align-items : center;
  top         : -20px;
  position    : relative;
}

<p>
  class: stack-block
  <b>Type</b> 
  the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-block">
    <span>
      <span>&larr;</span>
      <span>something</span>
    </span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

Answer 2

我猜你需要这个。

我加了 line-height:1em; transform:translate(0,-25%); 到您的堆栈 class.

并且您可以为 stack class 的子级使用任何填充它会自动对齐。

.stack,.stack-children-with-1-rem-padding {
  display         : inline-flex;
  flex-flow       : column;
  align-items     : center;
  justify-content : center;
  line-height:1em;
  transform:translate(0,-25%);
}

.stack-children-with-1-rem-padding>*{
  padding:1rem;
}

<p>
  class: stack
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

<p>
  class: stack (children with 1rem padding)<br/>
  <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph:
  <span class="stack-children-with-1-rem-padding">
      <span>&larr;</span>
  <span>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

Answer 3

我已经确定了一个使用堆栈容器的解决方案：显示：inline-block，行容器：显示：table-row，以及单元格容器：显示：table-cell

.stack-table {
    display: inline-block;
}
.stack-table > span {
    display: table-row;
    transform: translate(0, 25%);    
}    
.stack-table > span > span {
    display: table-cell;
    vertical-align: center;
    text-align: center;
    width: auto;
    height: auto;
    font-style: oblique 10deg;
}

  <p>
    class: stack-table
    <b>Type</b> the following should be vertically aligned and centered. The bottom of the "stack" should align with the text in the paragraph: 
    <span class="stack-table">
      <span><span>&larr;</span></span>
      <span><span>something</span></span>
    </span>
    the text that comes after the stack should follow the vertically aligned and centered text. 
  </p>

我决定使 stack-table 倾斜以使其更引人注目。我翻译了一点（感谢@Anirudhsanthosh）

如何设置段落中垂直对齐和居中的两个跨度的样式

how to style two spans that are vertically aligned and centered within a paragraph

html

css

inline-styles