简单的 CSS 查询答案

【问题标题】：Simple CSS Query简单的 CSS 查询
【发布时间】：2010-09-07 23:56:01
【问题描述】：

<div class="priceBox">

    <a href="#">
        <div class="priceBtn">
            <span class="priceBtnTxt">Order Now</span>
        </div>
    </a>  

</div>

为了使priceBtn 在priceBox 中居中，任何类都需要哪些 CSS 属性？

【问题讨论】：

标签： html css alignment

【解决方案1】：

这实际上取决于您正在寻找的结果。要使该 div 居中，您可以使用：

.priceBtn
{ 
    margin: 0 auto;
}

【讨论】：

零表示上下边距为0，auto表示在运行时根据容器的宽度计算左右边距。左右边距等于(container_width - box_width) / 2
感谢 Pavel 的补充说明！
不知道为什么你得到了 2 票反对，它完美地回答了这个问题。

【解决方案2】：

您的 HTML 无效，因此我们将首先解决该问题。一个锚<a> 是一个内联元素和一个<div> 一个块级元素。不能将块级元素放入内联元素中。

这会导致不同浏览器中的行为不一致。特别是，您可能只能在某些浏览器中单击超链接的文本，而在其他浏览器中可以单击其整个区域。

因此，您将使用更多 CSS。

HTML

<div class="priceBox">

    <a href="#" class="priceBtn">
        <span class="priceBtnTxt">Order Now</span>
    </a>  

</div>

CSS

您现在有两个选择：

.priceBox {
    text-align:center;
}

或：

.priceBox a.priceBtn {
    display:block;
    margin:auto;
    /* These you can toy with but they're mostly there for demo purposes */
    width:100px;
    borde:1px solid black;
}

【讨论】：

@Tom Gullen - 如果您能解释为什么在锚点 <div> 中有一个 <div>，我会尽力为您提供更多解释/替代方案。
感谢您向我指出，我现在已经更改了它，所以它是有效的。这只是我一直做的一个旧习惯。

【解决方案3】：

通常你只需要.priceBtn { margin: auto; } 并减少 .priceBtn 元素的宽度。不过，这可能比这更复杂，具体取决于上下文。

【讨论】：

【解决方案4】：

首先，HTML 代码无效。您不能将块元素放在锚元素内，因为它是内联元素。您需要将内联元素放在锚元素中：

<div class="priceBox">

    <a href="#">
        <span class="priceBtn">
            <span class="priceBtnTxt">Order Now</span>
        </span>
    </a>  

</div>

现在您可以将锚标记和其中的跨度设置为块元素。这是因为结构在应用 CSS 之前和之后都有效：

priceBox a, priceBox a > span { display: block; }

要使按钮在框内居中，您可以在按钮上使用自动边距：

priceBox a { margin-left: auto; margin-right: auto; }

【讨论】：

【解决方案5】：

试试

.priceBtn{
   margin: 0 auto;
   ...
}

【讨论】：

【解决方案6】：

取决于价格框的大小

.priceBtn
{
    margin: 0 auto;
    width:100px;
}

以 100px 为例，不知道 pricebox 的大小，

我建议也将锚点放在 priceBtn 内

【讨论】：