CSS:标题和副标题与图像垂直对齐

Question

我正在尝试实现类似的效果:

标题及其子标题均与图像垂直对齐。

我编写了以下代码:
http://jsfiddle.net/u4zxn4eb/

它有效，但这是实现这一目标的最佳方法吗？

<div class="wrapper">
 <h1>
    <a href="#"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt=""></a>
    <div class="vertical_align">
        <a href="#">Your company's name</a>
        <p>Description</p>
    </div>
 </h1>
</div>  

CSS:

body {
    background: lightgrey;
}
.wrapper {
    background: grey;
    width: 100%;
}
h1 {
    font-size: 18px;
    margin: 0;
    position: relative;
    top: 35px;
}
.vertical_align {
    display: inline-block;
    vertical-align: middle;
}
img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
p {
    margin: 0;
}

编辑
正如@chrisbedoya建议的那样，我不应该将div放在h1标签内。
已删除。

不要使用 h1 标签来定位整体，最好单独应用这些规则:

.vertical_align a, 
.vertical_align p {
   position: relative;
   top: 40px;
}

Answer 1

好吧，定义“最佳”。如果您的方法符合标准并且适用于所有浏览器，那么请使用它。如果您有兴趣，我会这样做:

<style>

 #header {
  height: 100px;
  margin: 0px;
  padding: 0px;
  width: 500px;
 }

 #rectangle {
  background-color: #f0f0f0;
  height: 80px;
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 0px;
   top: 0px;
  width: 500px;
  z-index: 1;
 }

 #square {
  background-color: #ff0000;
  height: 80px;
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 20px;
   top: 20px;
  width: 80px;
  z-index: 2;
 }

 #text {
  /* background-color: #00ff00; */
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 120px;
   top: 41px;
  width: 360px;
  z-index: 2;
 }

 h1 {
  font-family: Arial;
  font-size: 20px;
  line-height: 20px;
  margin: 0px;
  padding: 0px;
 }

 p {
  font-family: Arial;
  font-size: 12px;
  line-height: 12px;
  margin: 5px 0px 0px 0px;
  padding: 0px;
 }

</style>
<div id="header">
 <div id="rectangle"></div>
 <div id="square"></div>
 <div id="text">
  <h1>Company Name</h1>
  <p>Company Tagline</p>
 </div>
</div>