Html CSS：如何水平对齐按钮和文本

我有下个月的假期：

它有一个左右按钮，其中包含当前月份的文本。 正如你所看到的，它看起来不好

HTML:

我在显示设置中尝试了各种选项，如

display:table

和

display:inline

，但都不起作用

在Chrome开发工具中，如果我取消选中并再次选中

display:inline block它工作

此代码有什么问题？
更改
\mescorrente
的CSS

#mescorrente{
最小宽度：200px；
文本对齐：居中；
}
我在这里看到了两个选项。您可以创建多个div元素并内联显示它们，也可以使用

<span> 



元素，因为它旨在以本机方式内联显示元素


我建议使用span元素，因为我已经成功地使用了这种方法，只要您希望它们真正内联，而不是通过脚本交错/相对对齐。
您可以使用以下方法：


或

}

但只要您在参数中使用px，如果上述方法没有帮助，您可以像这样设置左侧的距离：

#somar {
margin-top:2px;
left: 150px;

}
只是一种稍微不同的方法-浮动div中的三个组件，然后定位div-

你还想用它做些什么吗

CSS

查看css的
：before
和
：after
选择器。我得到了.ui-helper-clearfix:before、.ui-helper-clearfix:after{content:；display:table；}第二个建议在指定的#seletor宽度下工作正常。但是，因为单词的长度不同，所以右键的位置…请用英语发帖。
<span> 

#somar {
margin-top:2px;
float:right;

#somar {
margin-top:2px;
left: 150px;

#seletor {
    width: 300px;
    margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
    float: left;
    vertical-align: top;
    margin-left: 10px;
}
#subtrair, #somar {
    margin-top:2px;
}
#mescorrente {
    font-size: 20px;
    text-transform: uppercase;
    padding:0 6px; /* optional padding.. */
    margin-bottom: 10px;
    white-space: nowrap;

}