Search code examples
htmlcsstext-align

aligning three paragraph vertically

I'm trying to align three paragraph vertically- one in top, one in middle and another one in bottom using justify-content and align-items. Note that three paragraphs is in a div tag. how to do this? I'm trying to make this short as possible.

Solution

  • You can make the div flex: https://codepen.io/hans-felix/pen/MWwdawm

    .box {
  background: yellow;
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


<div class="box">
  <p class="top">Lorem Ipsum ...</p>

   <p class="middle">Lorem Ipsum ...</p>

   <p class="bottom">Lorem Ipsum ...</p>
</div>