CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 16724

How do I align to center div without place on ceter its elements?

I'd like to put a div in the center but without place the elements inside the div in the center too. Live example. I want the div itself with border in the center but not its contents (in this case, they should be on right side). How can I do this? I tried with padding, margin but I can't make it working.

Upvotes: 0

Views: 606

Answers (3)

Spencer May
Spencer May

Reputation: 4505

If div A (or B) has a fixed size when you decide to center it, set the css to this:

#a {
    width:200px;
    border: 2px solid;
    margin:0 auto 0 auto;
}

This will center without using text-align:center;

If you don't have a fixed width, set div B to have text-align:left;

#a {
    border: 2px solid;
    text-align:center;
}
#b {
    text-align:left;
}

Upvotes: 1

rmorrin
rmorrin

Reputation: 2485

a div is a block element by default, meaning it'll take up 100% of the width of it's parent. If you want to center-align it, you can do so by specifying a (smaller) fixed width then aligning with margin: 0 auto;. This adds an equal amount of margin on each side, making up the rest of the width.

#a {
    border: 2px solid;
    width: 500px;
    margin: 0 auto;
}

Working fiddle: http://jsfiddle.net/yj55ttes/

Upvotes: 2

dsuess
dsuess

Reputation: 5347

Maybe you want to reset inner elements to 'initial' alignment, saying 'left'.

#a {
    border: 2px solid;
    text-align: center;
}
#a * {
    text-align: initial;
}

http://jsfiddle.net/nxp1tb2r/5/

Upvotes: 1

Related Questions