Align baseline with bottom of inline-block

Question

The texts baseline of inline-block is not aligning at the bottom.

How do you align the radical at the bottom of inline-block instead of text bottom (baseline)?

Current Code

.parent {
  height: 200px;
}

.radical {
  border: 1px solid #000;
  display: inline-block;
  vertical-align: bottom;
}

.radicalData {
  height: 200px;
}

<div class="parent">
  <span class="radical">√</span>
  <span class="radical">hello</span>
  <span class="radicalData"></span>
</div>

why not use `✓`(check mark) instead of `√`(square root mark) — NoobTW, Aug 21 '18 at 01:55
I'll be scaling the container. It'll look dissimilar to a square root when it's twice the size. — shano12, Aug 21 '18 at 04:25

score 1 · Accepted Answer · answered Aug 21 '18 at 03:05

You could treat the square root mark √ as content via an ::after selector. From there use position: absolute along with top: 6px to layer it over the bordered span.

HTML:

<div class="parent">
    <span class="radical2"></span>
    <span class="radical">hello</span>
    <span class="radicalData"></span>
</div>

CSS:

 body {
     font-size:28.8px;
     font-family:"Symbola";
     vertical-align:bottom;
}

 .parent{
     height:200px;
}

 .radical {
     border:1px solid #000;
     display:inline-block;
     vertical-align:bottom;
}

 .radical2 {
     border:1px solid #000;
     display:inline-block;
     height: 33px;
     position: relative;
     vertical-align:bottom;
     width: 20px;
}

 .radical2::after {
     content: "√";
     height: 33px;
     position: absolute;
     margin-bottom: -10px;
     top: 7px;
     z-index: 1;
}

 .radicalData {
     height:200px;
}

Working Fiddle here.

score 0 · Answer 2 · answered Aug 21 '18 at 07:13

Add overflow:hidden to the second inline-block to move its baseline to the bottom then keep the default alignment:

.parent {
  height: 200px;
}

.radical {
  display: inline-block;
}

.radicalData {
  height: 200px;
}

<div class="parent">
  <span class="radical">√</span>
  <span class="radical" style="overflow:hidden;">hello</span>
  <span class="radicalData"></span>
</div>

You can also adjust the line-height like this:

.parent {
  height: 200px;
}

.radical {
  display: inline-block;
  border:1px solid;
  vertical-align:bottom
}

.radicalData {
  height: 200px;
}

<div class="parent">
  <span class="radical" style="line-height:12px;">√</span>
  <span class="radical">hello</span>
  <span class="radicalData"></span>
</div>

Align baseline with bottom of inline-block

2 Answers2