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 does changing the display attribute in the styling of an element hide/show it?

    how to have a menu across top with links left aligned and right aligned

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    how to scroll text area horizontally?

    How can you hide CSS from the iPhone, but not other browsers?

    How to convert css margin value to pixels with just plain javascript?

    How do I get css links to resolve correctly when adding a PathInfo value?

    How to display parent form when input text is on focus?

    how to set an element at fixed relative position in html rendering.? [closed]

    how to apply css in angular.js

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    How to hide a segment of my website using PHP

    how to use jquery closest function

    How to automatically style HTML output of kramdown converter?

    How to make dropdown list unselectable?

    How to show middle of image in div using css?

    How to create a dotted shadowy effect on an image with CSS?

    Show/Hide elements in a table

    How to get the style value using attr

    How can I Add sub menus to dropdown menus?

    How to make a fixed navigation bar stretch to the width of the browser?

    CSS How to display a single icon out of a matrix for a list item

    How to get CSS in Javascript working correctly

    How to make lightbox scroll the lightbox and not the page

    How to display grid line on top of highchart

    How to use Javascript to check and load CSS if not loaded?

    How to apply IE Fixes for LESS CSS [closed]

    how to get value from this html date-ranger?

    How to make image previews (thumbnails) using html/css