0

Is there a way to center the texts of multiple flex items vertically, so that the center of the paragraph is at the same position for all of them? The height and width of the text is fixed and should not be adjusted

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.child {
  background: red;
  width: 50px;
}
<div class='container'>
  <div class='child'>
    <p>Lorem </p>
  </div>
  <div class='child'>
    <p>Lorem ipsum</p>
  </div>
  <div class='child'>
    <p>Lorem ipsum dol</p>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
alpa
  • 35
  • 3
  • Make `.child` flex containers also and use the appropriate [flex property](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties) to center things. – isherwood Jul 24 '23 at 19:44
  • try this .child { position: relative; height: 100px; } .child p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } – Keshav Bhadouria Jul 24 '23 at 19:49

0 Answers0