Как сделать вертикальное выравнивание текста, если Vertical-Align не работает?

Question

[Константин]

<section>
      <div class="container__second-lpx">
        <div class="list"></div>
        <h1 class="title__table">Why abode? Compare and find out.</h1>
        <div class="table">
        <div class="table__cell">
          <div class="cell"></div>
          <div class="cell">App Access & Mobile<br> Notifications</div>
          <div class="cell">Home Automation<br> Platform</div>
          <div class="cell">24/7 Pro Monitoring</div>
          <div class="cell">Minimum Fee For Cameras<br> On System</div>
          <div class="cell">Smart Home<br> Integrations</div>
        </div>
        <div class="table__cell">
          <div class="cell bold">Seqty</div>
          <div class="cell bold">Included Free</div>
          <div class="cell dot__grey"><img src="./images/dot__grey.png" alt=" "></div>
          <div class="cell bold">$8.33/mo*</div>
          <div class="cell bold">FREE</div>
          <div class="cell bold">
           HUE, Sonos, Bose, IFTTT,<br> Apple HomeKit, 100+ others
          </div>
          <button>  </button>
        </div>
        <div class="table__cell">
          <div class="cell bold">SIMPLISAFE</div>
          <div class="cell bold">$25/mo</div>
          <div class="cell cross__red"><img src="./images/cross.png" alt=" "></div>
          <div class="cell bold">Starts at $15/mo</div>
          <div class="cell bold">$19.99/mo</div>
          <div class="cell">Nest (Thermostat only), August</div>
        </div>
        <div class="table__cell">
          <div class="cell bold">ADT BLUE</div>
          <div class="cell bold">Included Free</div>
          <div class="cell dot__blue"><img src="./images/dot__blue.png" alt=" "></div>
          <div class="cell bold">$19.99/mo</div>
          <div class="cell bold">FREE</div>
          <div class="cell">
            HUE, Nest, Sonos, iRobot, IFTTT, Lutron, etc.
          </div>
        </div>
      </div>
    </div>
  </div>
  </section>

.table {
  display: flex;
  flex-wrap: wrap;
  margin-top: 80px;
}

.title__table {
  padding-top: 139px;
  padding-bottom: 80px;
  font-size: 48px;
  line-height: 130%;
  text-align: center;
  color: #190a33;
  max-width: 690px;
  margin: 0 auto;
}

.table__cell {
  list-style: none;
}

.bold__indent {
  font-weight: 600;
  font-size: 20px;
  line-height: 180%;
  text-align: center;
  color: #ffffff;
  opacity: 0.8;
}

.table__cell .cell {
  border-bottom: 1px solid #666a80;
  height: 125px;
}

.table__cell:nth-child(3) {
  text-align: center;
}

.table__cell:nth-child(4) {
  text-align: center;
}

.table__cell:nth-child(2) {
  background: #0c0f35;
  opacity: 0.8;
  border-radius: 20px;
  color: #ffffff;
  text-align: center;
}

.table__cell:nth-child(1) .cell {
  font-size: 20px;
  line-height: 180%;
  color: #605c66;
  opacity: 0.8;
  padding-top: 25px;
}

.table__cell:nth-child(2) .cell {
  width: 380px;
}

.table__cell:nth-child(3) .cell {
  width: 380px;
}

.table__cell:nth-child(4) .cell {
  width: 380px;
}

.table__cell button {
  margin-bottom: 54px;
  margin-top: 25px;
  width: 192px;
  height: 60px;
  background: #ffffff;
  border-radius: 33px;
}

.Seqty {
  padding-top: 45px;
  font-weight: bold;
  font-size: 24px;
  line-height: 130%;
  color: #f4f6f8;
  opacity: 0.8;
}

.bold {
  font-weight: 600;
  font-size: 20px;
  line-height: 180%;
  opacity: 0.8;
}

Answer 1

[MisterVerstalschyk]

Добрий день!
Задайте блоку з текстом display: flex. Також задайте align-items: center;
Якщо я правильно зрозумів Вас, то повинно допомогти, якщо ні, то пишіть - спробую допомогти!