需要将文本与 Div 中的图像对齐

Question

我正在尝试将页眉和段落与页面上的图像对齐，但我很难做到。我想要两行，每行都有一张图片和我上面列出的东西。

这是我想要的格式，但我似乎看不到图片旁边的文字。这是代码：

h5 {
 font-family:'Muli', sans-serif;
 font-size:26px;
 color:#00ffff;
}
p.par {
 font-family:sans-serif;
 font-size:14px;
 color:#030303;
}
.sample {
 width:250px;
 height:250px;
 
}
#bodywrap {
 width:1400px;
 margin:0 auto;
 clear:both;
}
#firstrow, #secondrow {
 width:600px;
 float:left;
 margin:50px;
}

<div id="bodywrap">
  <div id="firstrow">
    <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div>
  <div id="secondrow">
    <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div> 
</div>

如有任何帮助或建议，我们将不胜感激。

Answer 1

我会将每个内容部分包装在一个容器中（如果您选择调整内容，您将有更多的控制权）并将您的 a 标签（因为它们包装您的图像）浮动到左侧:

HTML

<div id="bodywrap">
  <div id="firstrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
        </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>
  <div id="secondrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>    
</div>

CSS

h5 {
   font-family:'Muli', sans-serif;
   font-size:26px;
   color:#00ffff;
   padding: 0; //clear default
   margin: 0; //clear default
}

.wrapper{ 
   overflow: hidden; //clears the float
   margin-bottom: 20px;
}

a{
   float: left;
   margin-right: 15px;
}

FIDDLE

需要将文本与 Div 中的图像对齐

Need To Align Text With Images Inside Divs

html

image

alignment