How come my <textarea> is not centered when it parents are centered with 'margin: 0 auto' ?

Question

For some reason my textarea DIV is not inheriting

margin: 0 auto

from its parent:

*
{
    padding: 0;
    margin: 0 auto;
}

Here is a link to my CSS & HTML for this example

How can I make it so that the textarea DIV actually gets centered?

Answer 1

Add display:block; to textarea style. After that textarea will be treated as block element and will be displayed centered.

textarea
{
    display:block;
        resize: none;
    overflow: hidden;
    width: 460px;
    padding: 3px;   
}

Answer 2

By default, margins are not inherited. You need to specifiy margin: 0 auto; explicitly for the textarea in question. Otherwise, the containing element will be centered, but the textarea will be laid out inside the container according to the regular flow (ie., margin: 0;).