Css Center Text and Div Vertically

December 1, 2019
<div class="center-vertical">
  <div class="box"></div>
  <div class="big-text">Hello</div>
  <div class="small-text">World</div>
</div>

Scss

.center-vertical {
  display: flex;
  align-items: center;

  .box {
    margin: 4px;
    width: 8px;
    background-color: black;
    height: 16px;
  }

  .small-text {
    padding: 4px;
    font-size: 20px;
  }

  .big-text {
    padding: 4px;
    font-size: 30px;
  }
}

CSS

.center-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.center-vertical .box {
  margin: 4px;
  width: 8px;
  background-color: black;
  height: 16px;
}
.center-vertical .small-text {
  padding: 4px;
  font-size: 20px;
}
.center-vertical .big-text {
  padding: 4px;
  font-size: 30px;
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.