为什么我不能调整我的文字和按钮？

Question

为什么我的文本和按钮在蓝色内容区域中有一些额外的空间,我无法在页面中对齐它们.我怎么解决这个问题？

这是我的HTML代码:

<div class="item-container">
  <span class="item">??????(15?)</span>
  <input type="button" class="score-input">
</div>

这是我的css代码:

.score-input{
   width:50px;
  margin-left:30%;
}
.item-container{
  margin-bottom: 10px;
  font-size:1rem;
  margin-top:10px;
  padding-left: 20px;
}

Answer 1

span是一个inline element所以你需要改变它display并使用vertical-align,将它们与父div的中心对齐.

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式.

vertcial-align:middle将元素的中间与基线加上父级的x高度的一半对齐.

如果您控制按钮的显示,那么您会将其视为显示inline-block,因此您也可以使用vertical-align文本并将其与父div的中心对齐.

#b {
  width: 100%;
  height: auto;
  background: blue;
}

.item {
  display: inline-block;
  vertical-align: middle;
}

.score-input {
  width: 50px;
  margin-left: 30%;
  display: inline-block;
  vertical-align: middle;
}

<div id="b">
  <span class="item">??????15?</span>
  <input type="button" class="score-input">
</div>