Простой CSS-запрос

Question

<div class="priceBox">

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

</div>

Какие свойства CSS понадобятся любому из классов, чтобы priceBtn центрировался в priceBox?

Answer 1

Это действительно зависит от результата, который вы ищете.Для центрирования этого div вы можете использовать:

.priceBtn
{ 
    margin: 0 auto;
}

Answer 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;
}

Answer 3

1001 * попробовать *

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

Answer 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; }

Answer 5

Зависит от размера PriceBox

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

дано 100px в качестве примера, так как не знаю размер прайс-бокса,

Я бы предложил поставить якорь внутри priceBtn

Answer 6

Обычно вам просто нужно .priceBtn { margin: auto; } и уменьшить ширину элемента .priceBtn. Это может быть сложнее, чем в зависимости от контекста.