如何让我的文字与我的图像对齐

Question

因此，在我网站的内容部分，我有一个每日突出显示项目的部分。他们每个人都有一个缩略图，预览，头部和简短描述。页面的链接是缩略图和头部，而描述不可点击。

问题是我的文字显示在缩略图的右下方，而它应该与它垂直对齐。如何使其向上移动，使其位于缩略图的右下方？

#highlights {
	width: 50%;
	float: left;
}

#highlights p {
	margin-left: 90px;
	margin-right: 30px;
}

#highlights img {
	vertical-align: top;
	border: 1px #00366C solid;
	margin-left: 5px;
}

#highlights h1 {
	display: inline;
	color: #00366C;
	font-weight: bold;
	font-size: 10px;
	background: none;
}

#highlights a {
	color: #00366C;
}

<a href="http://gamingw.net/games/632">
    <img height="65" src="images/game-632.jpg" width="80">
    <h1>Coastercraft Gold</h1>
</a>
<p>
    Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts 
    of other Theme-park managemently-things in this fun and refreshing game.
</p>

Answer 1

我个人的方法是稍微更改标记，而不是将图像和标题包装在一个锚点中。我还会浮动图像和文本内容以使它们正确对齐。

.project > a,
.project-text {
  float: left;
}
.project-text {
  padding: 5px;
}
.project-text h2 {
  margin: 0 0 0.5em;
}

<div class="project">
  <a href="http://google.com">
    <img src="http://placehold.it/100x100">
  </a>
  <div class="project-text">
    <h2><a href="http://google.com">Project Heading</a></h2>
    <p>
      Lorem ipsum.
    </p>
  </div>
</div>

演示JSFiddle

Answer 2

这样的东西？我刚刚制作了图片float: left并调整了一些边距。

＆＃13;

＆＃13;

#highlights {
  width: 50%;
  float: left;
}
#highlights p {
  margin-left: 90px;
  margin-right: 30px;
  margin-top: 5px;
}
#highlights img {
  margin-top: 7px;
  float: left;
}
#highlights h1 {
  margin-left: 90px;
  color: #00366C;
  font-weight: bold;
  font-size: 10px;
  background: none;
  margin-bottom: 0;
}
#highlights a {
  color: #00366C;
}

＆＃13;

<div id="highlights">
  <a href="http://gamingw.net/games/632">
    <img src="images/game-632.jpg" width="80" height="65">
    <h1>Coastercraft Gold</h1>
  </a>
  <p>Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts of other Theme-park managemently-things in this fun and refreshing game.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你漂浮了整个#highlights，但不是图像本身。

以下必要的更改

#highlights img {
  vertical-align: top;
  border: 1px #00366C solid;
  margin-left: 5px;
  float: left; //Add this line
}