Question

我想要它，所以我有一个容器，我可以在里面放三个div，div将包括一个图像，一个标题和一个小段落，我希望它们在中心对齐，所以第二个是正确的在中心，我将如何做到这一点？

Answer 1

这是实现它的一种非常简单的方法：

我使用了三个section div，每个div都以声明宽度和margin: 0 auto规则为中心。

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>

Answer 2

这是最简单的事情，一点研究和一些学习会帮助你。无论如何，这是一个基本的例子

HTML结构Emmet

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

代码

.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>

集装箱查询

2 个答案: