CODEWITHSUNDEEP
htmlcss
user5832968
user5832968

Reputation:

Container enquiries

I am wanting to make it so I have a container where I can put three divs inside, the divs will include one image each, a title and a small paragraph and I want them aligned in the center so the second one is right in the center, how would I go by doing this?

Upvotes: 0

Views: 32

Answers (2)

Aziz
Aziz

Reputation: 7793

This is the simplest of things, a little research and some learning would help you alot. Here is a basic example anyway

HTML Structure Emmet

.wrapper>.col33*3>h2{Image $}+img+p>lorem

Code 

.col33 {
  width:33.33%;
  padding:2em;
  float:left;
  box-sizing:border-box;
}

.col33 img {width:100%; height:auto;}
<div class="wrapper">
  <div class="col33">
    <h2>Image 1</h2>
    <img src="http://img.foodnetwork.com/FOOD/2012/04/25/HE_Avocado-Mayo_s4x3_lead.jpg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias maxime ipsum repudiandae, modi, non accusamus magni voluptatibus quam id sed maiores cupiditate blanditiis. Itaque recusandae sunt quibusdam sit, veritatis quaerat!</p>
  </div>
  <div class="col33">
    <h2>Image 2</h2>
    <img src="http://www.beyondthepeel.net/wp-content/uploads/2012/06/IMG_2144-400x300.jpg" alt="">
    <p>Assumenda delectus cum, sed repellat consequatur soluta asperiores reprehenderit inventore minima consectetur labore adipisci aperiam veniam praesentium ipsa quidem dolorem deleniti magni vel quas hic suscipit earum illum maxime porro!</p>
  </div>
  <div class="col33">
    <h2>Image 3</h2>
    <img src="http://cdn.crownmediadev.com/19/32fb569cd0bc5467d0af8aed2a2ac1/H&F-Ep1137-Product-Avocado-Toast.jpg" alt="">
    <p>Commodi labore, impedit possimus quas assumenda esse architecto atque. Quis at quod et minus ducimus distinctio natus dolorum cum aliquid officia dolores consequuntur odit vitae aut, ipsa quos ipsum est!</p>
  </div>
</div>

Upvotes: 0

fbid
fbid

Reputation: 1570

This is a very simple way to achieve it:

I used three section divs , each centered declaring a width and the margin: 0 auto rule.

body{
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
}

section{
  width:50%;
  margin:0 auto;
}

h2.title{
  text-align:center;
}
<section>
  <h2 class="title">Section1</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>
<section>
  <h2 class="title">Section2</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>
<section>
  <h2 class="title">Section3</h2>
  <img src="http://lorempixel.com/300/300/animals" alt="">
</section>

Upvotes: 1

Related Questions