How to center a textarea using CSS?


Tags: html,css,textarea,center

Problem :

Forgive me for asking such a simple question, I'm new to both HTML and CSS. Is there an easy way to center a textarea? I figured I'd just try using

textarea{
    margin-left: auto;
    margin-right: auto;
}

but it (obviously?) didn't work.



Solution :

The margins won't affect the textarea because it is not a block level element, but you can make it display block if you like:

textarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

before and after

By default, textareas are display: inline, which is why you can put them side-by-side easily, and why the text-align: center answers work too.

The textarea can also be centered by putting it inside a flexbox container like this:

<style>
    div.justified {
        display: flex;
        justify-content: center;
    }
</style>

<div class="justified">
    <textarea>Textarea</textarea>
</div>

    CSS Howto..

    How do I change phpmyadmin font size for sql query box?

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    How to fade out after hover is done using CSS

    Can someone help explain how the css3 calc() method actually works?

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

    Yahoo news CSS, how to achieve behavior

    How can i give transparency effect in CSS?

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    How to Position Fixed with LOTS elements inside

    How to wrap text using CSS? [duplicate]

    How to make header background 100% height?

    How to always center a flexible square in viewport with pure CSS?

    How to negate conjunction of two attributes in CSS selector

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How To Fix This “Select” Drop Down Using Css [duplicate]

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to make Css transition effect work on Safari and Chrome?

    How does Bootstrap Grid really work?

    How to layer box-shadows using z-index?

    How to apply styles to an element with a prefixed ID?

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    How to remove the circle in the background of the impress.js demo

    How to apply css hover on multiple elements

    How may I stack multiple html/css buttons vertically along the center of the page?

    How to blend an image with a solid colour in CSS?

    how to apply jquery ui/css to forum field

    how i center div elements horizontally in css?

    How do I add CSS to part of another object?