中心跨度超过 Div 按钮

Posted 2023-03-29

【中文标题】中心跨度超过 Div 按钮

【英文标题】：Center Span Over Div Button

【发布时间】：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-rightfloat:none!important; text-align:center; 试试这个。否则在此处添加您的代码

【参考方案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 添加一个固定宽度。但这不是我的第一选择。