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>