Simple CSS Query

Question

<div class="priceBox">

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

</div>

What CSS properties would any of the classes need so that priceBtn is centered within priceBox ?

Answer 1

It really depends on the outcome you are looking for. To center that div you could use:

.priceBtn
{ 
    margin: 0 auto;
}

Answer 2

Normally you would just need .priceBtn { margin: auto; } and reduce .priceBtn element's width. It might be more complicated than that depending on the context, though.

Answer 3

You HTML is invalid, so we're going to fix that first. An anchor <a> is an inline element nd a <div> a block level element. You can't put a block level element in an inline element.

This would result in inconsistent behavior in different browsers. In particular, you might only be able to click the text of your hyperlink in some browsers, and be able to click its entire area in others.

So instead you'll use more CSS.

HTML

<div class="priceBox">

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

</div>

CSS

You now have two options:

.priceBox {
    text-align:center;
}

or:

.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 4

Dependant on the size of priceBox

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

given 100px as example as dont know the size of pricebox,

I would suggest putting the anchor inside priceBtn too

Answer 5

First of all, the HTML code is invalid. You can't put a block element inside the anchor element as it is an inline element. You need to put inline elements inside the anchor element instead:

<div class="priceBox">

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

</div>

Now you can make the anchor tag and the span inside it block elements. This works as the structure is valid both before and after the CSS is applied:

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

To center the button inside the box, you use auto margins on the button:

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

Answer 6

try

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