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

Question

我有以下月份选择器：

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

HTML：

<div id="seletor">
        <a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
            <div id="mescorrente"></div>
        <a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
    </div>

CSS：

#subtrair, #mescorrente, #somar {
    display:inline-block;
    vertical-align:top;
}
#subtrair, #somar {
    margin-top:2px;
}
#mescorrente {
    font-size:20px;
    text-transform:uppercase;
    padding:0 6px; /* optional padding.. */
    margin-bottom:10px;
    white-space: nowrap;

}

我在显示设置中尝试了各种选项，例如display:table和display:inline，但它不起作用。

在Chrome开发者工具中，如果我取消选中并再次检查display:inline-block;它就可以了！

此代码有什么问题？

Answer 1

更改#mescorrente的CSS。

#mescorrente {
  min-width: 200px;
  text-align: center;
}

Answer 2

我在这里看到两个选项。您可以创建多个div元素并以内联方式显示它们，也可以使用

<span> 

元素，因为它旨在本地内联显示元素。

http://www.w3schools.com/tags/tag_span.asp

我建议使用span元素，因为我使用此方法取得了很好的成功，只要您希望它们真正内联而不是通过脚本交错/相对对齐。

Answer 3

您可以使用：

<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>

或

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

}

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

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

}

Answer 4

稍微不同的方法 - 将div中的三个组件浮动，然后定位div - FIDDLE。

你想用它做更多的事吗？

CSS

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

}