为什么我不能对齐我的文本和按钮？

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

这是我的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; 
}

来源

2017-06-18 edison xue

额外空间？ – frnt

我猜OP意味着_span.item_上方的空间。如果是这样，请提供此元素容器的代码。 –

是的，你看到蓝色内容区域的按钮在底部有一些额外的空间。 –

span是inline element，所以你需要改变有display和使用vertical-align，它们对齐到中心母公司

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>

来源

2017-06-18 07:04:06 frnt

@edison xue检查此jsFiddle https://jsfiddle.net/w3tem50g/ – frnt

为什么我不能对齐我的文本和按钮？

回答

相关问题