webentwicklung-frage-antwort-db.com.de

Wie zentriere ich ein Textfeld mit CSS?

Verzeihen Sie, dass ich eine so einfache Frage gestellt habe, ich bin neu in HTML und CSS. Gibt es eine einfache Möglichkeit, einen Textbereich zu zentrieren? Ich dachte, ich würde es einfach versuchen

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

aber es hat (offensichtlich?) nicht funktioniert.

htmlcsstextareacenter
40
Chris

Die Ränder wirken sich nicht auf das Textfeld aus, da es sich nicht um ein Element auf Blockebene handelt. Sie können es jedoch so einstellen, dass es einen Block anzeigt, wenn Sie möchten:

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

before and after

Standardmäßig sind Textbereiche display: inline, weshalb man sie leicht nebeneinander stellen kann, und warum die text-align: center Antworten funktionieren auch.

Das Textfeld kann auch zentriert werden, indem es in einen Flexbox-Container wie folgt gestellt wird:

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

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

Einstellen text-align des übergeordneten Elements von center, wie folgt:

HTML:

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

CSS:

div { text-align: center; }

Hier ist ein Beispiel: http://jsfiddle.net/ujzLt/

9
davehauser

hinzufügen display: block; zu Ihren Textarea-Stilen

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>

sie wickeln Ihren Textbereich mit einem Div ein, geben ihm Breite und richten ihn dann mit text-align:center; aus.

1
Sotiris