Vertically align span in a div

Question

I am trying to vertically align the content "ABC Company" in a div using Bootstrap 4's alignment helper classes; but unable to do so. I am using the below code.

<div class="container" style="width: 740px;">
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

Please point out what am I missing !

@RDumais Yes I am trying to align the text 'ABC Company' vertically in the div — Jestino Sam, Nov 03 '17 at 18:55
@j08691 Basically I am planning to have an image there in place of the text; so actually I am trying to vertically align the image — Jestino Sam, Nov 03 '17 at 18:59
if you are planning to have an image... use an image. It is much easier. Then play with `padding-top`, `padding-bottom`, `margin-top`, `margin-bottom`. — mickro, Nov 03 '17 at 19:07
Check out this [link](https://stackoverflow.com/questions/41265182/vertical-alignment-in-bootstrap-4). I think this is what you are looking for. Bootstrap recently introduced flex box in its newest version. — Jack Moody, Nov 03 '17 at 19:07
Possible duplicate of [How do I center my span vertically in my overlay div?](https://stackoverflow.com/questions/43863355/how-do-i-center-my-span-vertically-in-my-overlay-div) This question gets asked far too often and makes me question the value of Bootstrap. — Rob, Nov 03 '17 at 19:32

curveball · Accepted Answer · 2017-11-03T19:20:59.903

Set display: flex; justify-content: center; align-items: center; for col-sm text-center or, alternatively, set display: flex; justify-content: center; for col-sm text-center and align-self: center; for <span>.

.col-sm.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<style>

</style>
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

Vertically align span in a div

1 Answers1