html - Bootstrap 中心 div 旁边有右边的 div

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 文本居中。然后，只需向右拉您想要在右侧粘贴的内容。

当然，这需要Bootstrap。对于非 Bootstrap 解决方案，只需使用 text-align: center; 让你的 div 内容居中，并使用 float: right;必须贴在右侧的内容。

编辑:就 Brandon 提到的而言，这无法正常工作。这里的问题是两个元素都在同一个容器中，并且共享相同的相对性。换句话说，右拉跨度在居中文本之后显示，这显然会导致错误行为，如 here 所示。 .

既然你想让它们完全相互独立，你就得考虑使用absolute定位。这fiddle展示了如何做到这一点。

注意:请记住，您的父容器需要相对定位。否则，您可能会弄乱您的样式。