HTML/CSS display =表格行對齊

我在使用<div display='table-cell'>時遇到兩個組件需要對齊時遇到問題。第一個組件在頂部顯示一個間隙。我希望他們被顯示，以便他們對齊。HTML/CSS display =表格行對齊

這裏的的jsfiddle：http://jsfiddle.net/66s7x5fr/

這裏的HTML：

<div class="form-group modifierColumn"> 
    <div class="cell"> 
     <select class="form-control input-sm btn-primary"> 
      <option value="Broad">Broad</option> 
      <option value="Moderate">Moderate</option> 
      <option value="Single">Single</option> 
     </select> 
    </div> 
    <div class="cell"> 
     <span class="input-group input-group-sm"> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button> 
      </span> 
      <input class="form-control text-justify" type="text" value="0"> </input> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button> 
      </span> 
     </span> 
    </div> 
</div>

這裏的CSS：

.modifierColumn .cell:not(:last-child) { 
    padding-right: 5px; 
} 
.cell { 
    display: table-cell; 
}

來源

2014-09-04 mjeffw

可能重複[如何居中水平表單元格（http://stackoverflow.com/questions/16226625/how-to-center-horizontal-表格單元格） – davidcondrey 2014-09-04 20:22:33

垂直對齊'.cell's：http://jsfiddle.net/66s7x5fr/4/ – Moob 2014-09-04 20:24:25

你的問題是頂級的填充該類細胞有。嘗試使用col-md-x來提高響應速度。

<div class="form-group modifierColumn" tabindex="0"> 
    <div class="col-xs-3"> 
     <select class="form-control input-sm btn-primary"> 
      <option value="Broad">Broad</option> 
      <option value="Moderate">Moderate</option> 
      <option value="Single">Single</option> 
     </select> 
    </div> 
    <div class="col-xs-4"> 
     <span class="input-group input-group-sm"> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button> 
      </span> 
      <input class="form-control text-justify" type="text" value="0"> </input> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button> 
      </span> 
     </span> 
    </div>

來源

2014-09-04 20:21:55

單元格類沒有填充 - 至少我聲明瞭。你能進一步解釋嗎？ – mjeffw 2014-09-04 20:25:39

如果您使用谷歌瀏覽器查看元素單元格，則會出現頂部填充，因爲垂直對齊。出於這個原因，我推薦像例子中那樣使用col-md-x。 – 2014-09-04 20:30:24

嘗試

.cell { 
    vertical-align: bottom; 
    display: table-cell; 
}

有些模糊規則。擋板很多。檢查Understanding vertical align

來源

2014-09-04 20:23:25 nocarrier

類似nocarrier的迴應：

.cell { 
    vertical-align: top; 
    display: table-cell; 
}

的

來源

2014-09-04 20:25:36

這是我的解決方案 - 它的工作原理！ – mjeffw 2014-09-04 20:33:20

HTML/CSS display =表格行對齊

回答

相關問題