中心跨度超过 Div 按钮答案

【问题标题】：Center Span Over Div Button中心跨度超过 Div 按钮
【发布时间】：2019-01-24 01:48:23
【问题描述】：

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

Dev view

编辑：

这是目前的代码：

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

【问题讨论】：

您好，请您添加您的代码。谢谢
添加您的代码会很有帮助。
请添加一些代码，我们可以帮助您！
.pull-right{float:none!important; text-align:center;} 试试这个。否则在此处添加您的代码

标签： html css html-table center centering

【解决方案1】：

引用您的图像后，.float-right div 上的宽度似乎为 100%。我会更改宽度设置并使容器继承孩子的宽度：

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

将 text-align: center 添加到 .float-right div 应该使 div 内的 span 和按钮居中。

.float-right div 不能为 100% 宽度的原因是因为您希望将两个元素居中在一个与 paypal 按钮一样宽的最大宽度内 - 以便跨度很好地对齐按钮。

这是完整的sn-p：

.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-right div 添加一个固定宽度。但这不是我的第一选择。

【讨论】：