需要将文本与 div 内的图像对齐答案

【问题标题】：Need To Align Text With Images Inside Divs需要将文本与 div 内的图像对齐
【发布时间】：2015-01-15 00:03:59
【问题描述】：

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

这是我想要的格式，但我似乎无法获得图片旁边的文字。代码如下：

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>

感谢任何帮助或建议。

【问题讨论】：

对齐是什么意思？你想让文字和图片有相同的宽度吗？或者您希望文字保留在每张图片的右侧，顶部对齐？
使用任何绘画应用程序并绘制您想要的要求，以便我们正确理解您的设计。
正确，我希望文字在照片的右侧和顶部。我尝试上传一张图片，它告诉我我没有足够的声誉。

标签： html image alignment

【解决方案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

【讨论】：