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

I am trying to create a "two-row" inline table within a paragraph. The js class stack-block-br works, but I would like to know whether there's a better way.

Here are my attempts

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 >
      <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 >
      <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 >
      <span>&larr;<br>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

The stack class "works" but the top span aligns with the text in the paragraph, and I cannot center the top span over the bottom.

The stack-block aligns the bottom with the p's text but it has no width.

With some javascript stack-block-br works. Note: I cannot use offsetWidth of the spans because the
returns a number much larger than the actual width.

CodePudding user response：

I've created a sandbox and adding code here as a proper answer.

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 >
    <span>
      <span>&larr;</span>
      <span>something</span>
    </span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>

CodePudding user response：

i guess you need this.

i added line-height:1em; transform:translate(0,-25%); to your stack class.

and you can use any padding for children of stack class it will automatically align.

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;
  line-height:1em;
  transform:translate(0,-25%);
}




.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 >
      <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 >
      <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 >
      <span>&larr;<br>something</span>
  </span>
  this text should follow the vertically aligned and centered text.
</p>