如何在Bootstrap / CSS中正確對齊此標題？

Question

我開始基於Twitter的Bootstrap框架模擬WordPress主題。 有人可以驗證我到目前為止的代碼是否是潔食嗎？

更具體地說，標題...我的名字和副標題在頭像圖片旁邊。 我希望文本垂直顯示在圖像的中間。 當頁面足夠寬（screengrab：imgur.com/YCpSm）時，此方法將成功工作。 但是，當我減小瀏覽器的寬度並啟用響應式設計時，文本會向上移動（screengrab：imgur.com/K4Vyj）。

如何確保文本停留在圖像的垂直中心？

謝謝。

-

代碼： http : //jsfiddle.net/robertandrews/jP4nT/ （其中包含標准bootstrap.css，標准bootstrap-sensitive.css和自定義CSS）

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

Answer 1

您可以使用浮動元素而不是絕對定位： http : //jsfiddle.net/jP4nT/1/

我也不會將<h1>標記放在<p>內，但這可能沒問題。

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;
}