Question

这是我的HTML：

<div class="welcome-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-10 welcome-msg">
                <?php echo $this->getWelcome() ?><?php echo $this->getAdditionalHtml() ?>
            </div>
            <div class="col-md-2 welcome-cart">
                <?php $_cartQty = $this->helper('checkout/cart')->getSummaryCount(); ?>
                <a href="<?php echo Mage::helper('checkout/url')->getCartUrl(); ?>"> <?php echo $this->__('View Cart'); ?>
                    (<?php echo $_cartQty ?: '0'; ?>)</a>
            </div>
        </div>
    </div>
</div>

以下是显示的内容：

[！[在此处输入图像说明] [1]] [1]

现在我的问题是..“欢迎信息”文本不是以整个栏为中心，只是col-md-10

的div

有没有办法执行此操作，以便view cart (0)与右侧对齐，welcome message text居中？

整个事情必须如下所示： [！[在此处输入图像说明] [2]] [2]

Answer 1

您可以试用fiddle。

究竟发生了什么，您首先将整个div文本居中。之后，只需pull-right您希望在右侧粘贴的内容。

当然，这需要Bootstrap。对于非Bootstrap解决方案，只需使用text-align: center;将div内容置于中心位置，然后使用float: right;获取必须贴在右侧的内容。

编辑：就布兰登所说，这是行不通的。这里的问题是两个元素都在同一个容器中，并且也具有相同的相关性。换句话说，右侧拉伸跨度将在居中文本之后显示，这显然会导致错误行为，如here所示。

由于您希望它们彼此完全独立，因此您必须考虑使用absolute定位。这个fiddle显示了如何执行此操作。

注意：请记住，您的父容器需要相对定位。否则，你可能会弄乱你的造型。

Answer 2

正如大家所提到的，你可以使用pull-right类。

<div class="welcome-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 welcome-msg text-center">
                <?php echo $this->getWelcome() ?><?php echo $this->getAdditionalHtml() ?>

                <?php $_cartQty = $this->helper('checkout/cart')->getSummaryCount(); ?>
                <a class='pull-right' href="<?php echo Mage::helper('checkout/url')->getCartUrl(); ?>"> <?php echo $this->__('View Cart'); ?>
                    (<?php echo $_cartQty ?: '0'; ?>)</a>
            </div>
        </div>
    </div>
</div>

Answer 3

有关Bootstrap示例解决方案，请参阅http://www.bootply.com/wycAs23Jcn。

    <div class="row">
        <div class="col-md-12 welcome-msg">
          <p>welcome message</p>
          <span class="pull-right">view cart (0)</span>
        </div>
    </div>

如果您想将“欢迎信息”居中，则应使用 class =“col-md-12”。

然后在具有text-align：center样式的div中添加代码。

然后只需将 pull-right 添加到与文本对齐的正确内容中。

Bootstrap中心div旁边有右侧div

3 个答案: