web-dev-qa-db-fra.com

Comment centrer une zone de texte en utilisant CSS?

Pardonnez-moi d'avoir posé une question aussi simple, je suis nouveau en HTML et en CSS. Existe-t-il un moyen simple de centrer une zone de texte? Je pensais que j'essaierais juste d'utiliser

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

mais cela (évidemment?) n'a pas fonctionné.

htmlcsstextareacenter
40
Chris

Les marges n'affecteront pas la zone de texte car ce n'est pas un élément de niveau bloc, mais vous pouvez le faire afficher bloc si vous le souhaitez:

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

before and after

Par défaut, les zones de texte sont display: inline, c'est pourquoi vous pouvez les mettre côte à côte facilement et pourquoi le text-align: center les réponses fonctionnent aussi.

La zone de texte peut également être centrée en la plaçant dans un conteneur flexbox comme ceci:

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

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

Ensemble text-align du parent de l'élément à center, comme ceci:

HTML:

<div>
    <textarea></textarea>
<div>

CSS:

div { text-align: center; }

Voici un exemple: http://jsfiddle.net/ujzLt/

9
davehauser

ajouter display: block; à vos styles de zone de texte

2
Jeff Adams
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>#container {width:100%; text-align:center;}</style>
</head>

<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10"></textarea>
</div>
</body>
</html>

vous enveloppez votre zone de texte avec un div, lui donnez de la largeur, puis vous l'alignez avec text-align:center;

1
Sotiris