行引導立式中心內容

Question

我在引導3一個簡單的表式的佈局，這樣的（這是一個「屬性網格）：

<div class="row"> 
    <div class="col-md-3"> 
    <div id="propGrid"> 
     <div class="row pgTable"> 
     <div class="col col-md-12"> 
      <div class="row pgGroupRow"> 
      <div class="col col-md-12 pgGroupCell">Editor</div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">Font<span class="pgTooltip" title="The font editor to use">[?]</span></div> 
      <div class="col col-md-7 pgCell"><input type="text" id="pg0font" value="Consolas" <="" input=""></div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">Font size</div> 
      <div class="col col-md-7 pgCell"><span class="ui-spinner ui-corner-all ui-widget ui-widget-content"><input type="text" id="pg0fontSize" value="14" style="width:50px" aria-valuemin="0" aria-valuemax="20" aria-valuenow="14" autocomplete="off" class="ui-spinner-input" role="spinbutton"><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-up ui-corner-tr"></a><a tabindex="-1" aria-hidden="true" class="ui-spinner-button ui-spinner-down ui-corner-br"></a></span></div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">Font color</div> 
      <div class="col col-md-7 pgCell"><input type="text" id="pg0fontColor" value="#a3ac03" <="" input=""></div> 
      </div> 
      <div class="row pgGroupRow"> 
      <div class="col col-md-12 pgGroupCell">Plugins</div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">jQuery<span class="pgTooltip" title="Whether or not to include jQuery on the page">[?]</span></div> 
      <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0jQuery" value="jQuery" checked=""></div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">modernizr<span class="pgTooltip" title="Whether or not to include modernizr on the page">[?]</span></div> 
      <div class="col col-md-7 pgCell"><input type="checkbox" id="pg0modernizr" value="modernizr"></div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">Framework<span class="pgTooltip" title="Whether to include any additional framework">[?]</span></div> 
      <div class="col col-md-7 pgCell"><select id="pg0framework"><option value="None">None</option><option value="angular" selected="">AngularJS</option><option value="backbone">Backbone.js</option></select></div> 
      </div> 
      <div class="row pgGroupRow"> 
      <div class="col col-md-12 pgGroupCell">Other</div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">iHaveNoMeta</div> 
      <div class="col col-md-7 pgCell"><input type="text" id="pg0iHaveNoMeta" value="Never mind..." <="" input=""></div> 
      </div> 
      <div class="row pgRow"> 
      <div class="col col-md-5 pgCell">I am read only</div> 
      <div class="col col-md-7 pgCell"><label for="pg0iAmReadOnly" title="Label types use a label tag for read-only properties">I am a label which is not editable</label></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

我一直在努力，但沒有成功垂直居中內容針對右列的高度左欄中的代碼在筆 http://codepen.io/anon/pen/rrvNaV 和。

退房看一看，特別是最後一排。

我試着調整填充，但因爲右欄的內容有不同的高度，這似乎不是一個好的解決方案。我通常使用的行高調整似乎由於類似原因而失敗。

有關如何垂直居中對齊兩列內容的任何想法，因爲它的行高（行高由任一列或特定行中的內容高度決定）？

Answer 1

垂直居中基於浮動的內容是非常成問題的。有一些黑客可以做到這一點（使用轉換或負底部邊距），但使用display table或flexbox來佈局要容易得多。

更改行了flexbox這樣的：

.pgRow { 
    background:yellow; 
    display: flex; /* make the row a flex container */ 
    align-items: center; /* vertically center each flex item in the container */ 
} 

務必從.va刪除height！一般來說，你不應該在CSS中設置容器的高度;這樣做只會引入其他問題。

如需更多選項，請查看http://howtocenterincss.com/。要獲得flexbox的處理，請查看out this有關CSS技巧的文章。爲了真正掌握所有這些事情以及他們如何一起工作（無恥插件警報），結帳my book。