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

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的中心。

＆＃13;

＆＃13;

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

＆＃13;

<div id="b">
  <span class="item">过去一年总结15分</span>
  <input type="button" class="score-input">
</div>

＆＃13;

＆＃13;

＆＃13;