html - 如何在 Bootstrap/CSS 中正确对齐此标题？

Question

我开始模拟一个基于 Twitter 的 Bootstrap 框架的 WordPress 主题。有人可以验证我到目前为止的代码是否是犹太洁食吗？

更具体地说，标题...我在头像旁边有我的名字和副标题。我希望文本垂直显示在图像中间。当页面足够宽时，这可以成功（screengrab：imgur.com/YCpSm）。但是，当我减小浏览器宽度并启动响应式设计时，文本会向上移动（截屏：imgur.com/K4Vyj）。

如何确保文本保持在图像的垂直中心？

谢谢。

--

代码： http: //jsfiddle.net/robertandrews/jP4nT/（包含标准 bootstrap.css、标准 bootstrap-responsive.css 和自定义 CSS 合二为一）

页面：http: //jsfiddle.net/robertandrews/jP4nT/embedded/result/

Answer 1

您可以使用浮动元素而不是绝对定位：http: //jsfiddle.net/jP4nT/1/

我也不会在 <p> 中放置 <h1> 标记，但这可能没问题。

Answer 2

这可能更简单：http: //jsfiddle.net/6FMDR/

• 不需要额外的 html 标签

• 更少的 CSS

CSS：

.myheader {
  padding:15px 0 20px;
  display:block;
}

.myheader img {
   float: left;
   padding:0 15px 10px 0;    
}

.myheader h1 {
   margin-top: 10px;
}