Question

我有一个通过贝宝（PayPal）集成创建的div按钮，并且在跨区中有一些文本，我都希望在结帐按钮下对齐这些文本。问题是，在将文本保持在同一div中的同时，我似乎无法使按钮上方的文本对齐。附有图像以供参考。在不进行拆分的情况下实现中心定位的最佳方法是什么？

Dev view

编辑：

以下是当前代码：

appdirs==1.4.3
click==6.7
Flask==0.12.1
gunicorn==19.7.1
itsdangerous==0.24
Jinja2==2.9.6
MarkupSafe==1.0
numpy==1.12.1
packaging==16.8
pandas==0.19.2
pyparsing==2.2.0
python-dateutil==2.6.0
pytz==2017.2
six==1.10.0
textstat==0.3.1
Werkzeug==0.12.1
spacy==2.0.5

Answer 1

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

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

将text-align：添加到.float-right div的中心应将范围和按钮居中于div内。

.float-right div不能为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-right div添加固定宽度。但这不是我的首选。

中心跨度超过Div按钮

1 个答案: