HTML - How to align box vertically with words inside

Question

I would like to align the boxes vertically. It works fine if the words in the box is all in one line. However if the words in one of the box goes to 2 lines or more the box will not align properly.

.col {
  display: inline-block;
  width: 31%;
  padding: 2px 5px;
}

.box {
  height: 80px;
  margin: 0 auto;
  display: flex;
  background-color: #f4f4f4;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  text-decoration: none;
  font-weight: normal;
}

<div class="col">
  <div class="box">Box</div>
</div>
<div class="col">
  <div class="box">This is a box</div>
</div>
<div class="col">
  <div class="box">Please see inside this box for some contents to read</div>
</div>

just add a wrapper with display flex – Sfili_81 Jul 21 '21 at 06:42 — Sfili_81, Jul 21 '21 at 06:42
`vertical-align: top` to `.col` – s.kuznetsov Jul 21 '21 at 06:44 — s.kuznetsov, Jul 21 '21 at 06:44

score 2 · Accepted Answer · answered Jul 21 '21 at 06:44

you can use flex box to easily avoid this issue. put all cols in a flex wrapper.

<div class="wrapper">
    <div class ="col">
        <div class="box">Box</div>
    </div>
    <div class ="col">
        <div class="box">This is a box</div>
    </div>
    <div class ="col">
        <div class="box">Please see inside this box for some contents to read</div>
    </div>
</div>


.wrapper{
    display: flex;
}

score 0 · Answer 2 · answered Jul 21 '21 at 06:51

Its because the <div class="box"> overflow with content.

you could adjust class .box height and add some padding to align them right properly.

.box {
height: 80px;
margin: 0 auto;
display: flex;
background-color: #f4f4f4;
justify-content: center;
align-items: center;
font-size: 20px;
text-decoration: none;
font-weight: normal;
height: 100%;
padding: 28px;
}

Heres an example https://codepen.io/mcfaith9/pen/vYmJvLK

score 0 · Answer 3 · answered Jul 21 '21 at 06:53

Add a flex parent .row which will contain your col cell columns

/*QuickReset*/ * {margin:0; box-sizing:border-box;}

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.cell-4 {
  flex: 1 1 33.333%;
}

.box {
  padding: 10px;
  border: 1px solid #aaa;
  background-color: #f4f4f4;
  min-height: 80px;
}

<div class="row">
  <div class="col cell-4">
    <div class="box">Box</div>
  </div>
  <div class="col cell-4">
    <div class="box">This is a box</div>
  </div>
  <div class="col cell-4">
    <div class="box">Please see inside this box for some contents to read</div>
  </div>
</div>

HTML - How to align box vertically with words inside

3 Answers3