div 按钮上的中心跨度

Question

我有一个通过PayPal集成创建的div按钮，并且我有一些文本，我都想在我的结帐按钮下对齐。问题是我似乎无法在按钮上对齐文本，同时将它们保留在同一div中。附上图像以供参考。在不将它们分开的情况下实现这种居中的最佳方法是什么？

开发视图

编辑：

以下是当前情况的代码：

<div class="buttons">
<div class="pull-left"><a href="{{shop.url}}" class="btn btn-default">{{'cart.general.continue_shopping' | t}}</a></div>
{%- if additional_checkout_buttons -%}
<div class="pull-right" id="additional-checkout-buttons" style="margin-left: 40px; margin-top: 8.4px;">
<span id="additional-checkout-buttons-label" style="margin-right: 5px; margin-top: 10.5px; display: inline-block;">{{'cart.general.checkout_using' | t}}:</span>
{{content_for_additional_checkout_buttons}}
</div>
{%- endif -%}
<div class="pull-right"><input type="submit" name="checkout" id="update-cart" class="btn btn-primary" value="{{'cart.general.checkout' | t}}" /></div>
</div>

Answer 1

引用您的图像后，看起来 .float-rightdiv 上的宽度为 100%。我会更改宽度设置并使容器继承子项的宽度：

.float-right {
display: inline-block; 
width: initial; 
text-align: center;
}

添加文本对齐：居中到 .float-rightdiv 应使div 内的跨度和按钮居中。

.float-rightdiv 不能是 100% 宽度的原因是，您希望将两个元素都集中在最大宽度与PayPal按钮一样宽的宽度内 - 以便跨度在按钮上很好地对齐。

以下是完整的片段：

.float-right {
float: right !important;
width: 100%
}

<div class="float-right" id="additional-checkout-buttons" style="margin-left: 40px; margin-top: 8.4px; display: inline-block; width: initial; text-align: center;">
<span id="additional-checkout-buttons-label">Or checkout using:</span>
<div class="additional-checkout-button additional-checkout-button--paypal" style="margin-top: 25px;">
<button type="button">Paypal button</button>
</div>
</div>

作为旁注，如果 width： initial 不想一起玩，您可以随时向 .float-rightdiv 添加固定宽度。但那不是我的首选。