谢谢。

尝试了三种办法：line-height, margin, padding均可以，不过，都是通过增加block
level的markup。<a>里面的文本套在<p>块里面。 这个问题，网上找了很多，都没找到
答案；初学者理论、实现理解不深，遇到复杂得情况，比较难办。

参见: jsfiddle
http://jsfiddle.net/saynothing/3b3gcq3o/2/ (可视化效果)

<div class="header" id="header1">
    <p class="name" id="name1">Jian Liu</p>
    <a href="elligere.lau@gmail.com"><p class="email"  
id="email1">elligere.lau@gmail.com</p></a>
</div>


<div class="header" id="header2">
    <p class="name" id="name2">Jian Liu</p>
    <a href="elligere.lau@gmail.com"><p class="email"  
id="email2">elligere.lau@gmail.com</p></a>
</div>

<div class="header" id="header3">
    <p class="name" id="name3">Jian Liu</p>
    <a href="elligere.lau@gmail.com"><p class="email"  
id="email3">elligere.lau@gmail.com</p></a>
</div>


* {
    border: 1px dashed red;    
}

.header {
    width: 100%;
    height: 51px;
}

.name {
    float: left;
    color: white;
    margin-left: 5px;
}

.email {
    float: right;
    color: white;
    margin-right: 5px;
}

#header1 {
    background-color: #668284;
}

#name1 {
    height: 12px;
    line-height: 12px;
}

#email1 {
    height: 12px;
    line-height: 12px;
}

#header2 {
    background-color: black;
}

#name2 {
    margin-top: 18px;  /*margin auto不能垂直居中??*/
}

#email2 {
    margin-top: 18px;  /*margin auto不能垂直居中??*/
}

#header3 {
    background-color: green;
}

#name3 {
    padding-top: 18px;
    margin-top: 0px;
}

#email3 {
    padding-top: 18px;
    margin-top: 0px;
}

【 在 shaolin (漫漫当爹路) 的大作中提到: 】
: 你可以设置俩float， left跟right，设置高，加个line-height 完事。
--
修改:saynothing FROM 122.235.136.*
FROM 122.235.136.*