Center 3 paragraphs in div

Long story short, I am new to html and css, I am wondering how to center 3 paragraphs in div?
There is each div for one paragraph and one main div that contains all 3 divs.

div.first {
    font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: left;
    text-align: center;
    padding-top: 40px;
}

div.second {
   font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: left;
    text-align: center;
    padding-top: 40px;
  }

div.third {
    font-family: 'Kanit', sans-serif;
    color: aliceblue;
    width: 30%;
    float: right;
    text-align: center;
    padding-top: 40px;
}

I tried this…

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}

… even tho I have no idea what it means.

>Solution :

I put the first,second and third divs into the container div and gave display:flex; attribute for centering 3 paragraphs in a div. And you can use justify-content:center; for centering horizontally. I hope it works for you.

.container {
  display: flex;
  justify-content: center;
}

.first {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}

.second {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}

.third {
  font-family: "Kanit", sans-serif;
  color: #000;
  padding: 40px;
  text-align: justify;
}
    <div class="container">
        <div class="first">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo rerum nostrum aliquam quidem quae modi
            culpa quis repudiandae est maiores nesciunt deleniti eius voluptatum vitae veritatis inventore, dolor
            quaerat reiciendis corrupti ex excepturi dicta hic debitis quisquam! Tempora repudiandae quidem doloremque
            consequuntur. Quos perspiciatis ratione reprehenderit iusto. Alias, at dolores!
        </div>
        <div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aliquam quia, iste
            explicabo inventore nam. Quisquam commodi vitae eaque odio similique exercitationem delectus modi! Quo
            placeat fuga neque consequatur optio necessitatibus pariatur minus recusandae, perspiciatis numquam porro
            temporibus laudantium similique officia cupiditate quasi sunt inventore magni minima omnis. Officia,
            laborum!</div>

        <div class="third">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium expedita blanditiis et iste, dolor sed
            excepturi vero deleniti recusandae magnam aliquid eveniet ut doloremque animi ipsam quae amet molestiae. Eum
            veritatis veniam fugit, exercitationem quia dolor. Officia, obcaecati minus porro laudantium ducimus amet
            delectus rerum error molestias a sunt harum!
        </div>
    </div>

Leave a Reply