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 =表格行对齐

回答

相关问题