【问题标题】：How do I properly align this title in Bootstrap/CSS?如何在 Bootstrap/CSS 中正确对齐此标题？
【发布时间】：2012-08-16 21:16:58
【问题描述】：

我开始模拟一个基于 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/

【问题讨论】：

标签： html css twitter-bootstrap alignment responsive-design

【解决方案1】：

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

我也不会将

标记放在

中，但这可能没问题。

【讨论】：

在您的代码中，当浏览器窗口收缩时，相邻的文本会在图片下方流动。它应该保持在右侧。
你是对的。这个怎么样：jsfiddle.net/jP4nT/2 如果您需要您的设计在更小的屏幕上工作，您可以添加更多媒体查询。希望有帮助！

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

【讨论】：

你觉得这个答案有用吗？