Vertikal zentrieren mit CSS

Spider67

Hallo,

ich möchte gerne einen Text in einem Eingabefeld vertikal zentrieren und bekomme das nicht hin. Nachfolgend mein CSS Code:

CSS

body {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #009900;
text-align: center;
font-size: 16px;
}

#mittig {
display: table;
}

#aufnahme1 {
position: absolute;
display: table-cell;
vertical-align:middle;
left: 39px;
top: 56px;
border: 2px dotted #990000;
width: 171px;
height: 35px;
}

Alles anzeigen

nachfolgend das HTML:

HTML

<body>
<form action="Anwendungen/send_email.php" method="post" enctype="application/x-www-form-urlencoded" name="Anmeldeformular" id="Anmeldeformular" dir="ltr" lang="de">
<h1 align="center">Antragsformular</h1>
<span id="mittig"><div id="aufnahme1"><label for="Aufnahme ab">Aufnahme ab</label></div></span>

der Text " Aufnahme ab" soll vertikal zentriert werden, klebt aber am oberen Rand der Box. Könnt Ihr mir helfen und mitteilen, wo der Fehler liegt?

Danke vorab und LG aus Österreich.

Dieter

Bandit

Siehe https://www.w3schools.com/css/css_align.asp

Spider67

Danke für die Antwort, Bedeutet das, dass ich mit meiner Methode (display: table, bzw. display:table-cell) das gewünschte nicht erreiche?

Da sollte doch auch funktionieren, oder nicht? Welchen div Container muss cih im html mit display: table auszeichen? Muss dieer dieser Div Container das body Element umschließen oder das form Element, damit ich dann die darin enthaltenen Divs mit display: table Cell und vertical-align: center zentrieren kann?

Oder funktioniert es mit padding einfacher, wenn ich z.B padding top und padding bottom auf 50% setze?

Danke für die Hilfe.

MrMurphy

Deine ganze Konstruktion ist Murks und sachlich falsch. So haben zum Beispiel div in span überhaupt nichts verloren. Beide (div und span) sind zudem unnötig und dürfen nach den HTML5-Regeln deshalb in diesem Fall nicht verwendet werden.

padding-top: 50% und padding-bottom: 50% ergeben 100%. Wo soll bei 100% noch Inhalt stehen?

An HTML benötigst du deshalb nur:

Code

<form action="Anwendungen/send_email.php" method="post" enctype="application/x-www-form-urlencoded" name="Anmeldeformular" id="Anmeldeformular" dir="ltr" lang="de">
   <h1 align="center">Antragsformular</h1>
   <label for="Aufnahme ab">Aufnahme ab</label>
</form>

und dazu das folgende CSS:

Code

      body {
         color: #009900;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 16px;
         font-weight: bold;
         text-align: center;
      }
      label {
         width: 171px;
         height: 35px;
         border: 2px dotted #990000;
         display: flex;
         justify-content: center;
         align-items: center;
      }

Alles anzeigen

Spider67

Hallo,

ich habe das jetzt mal mit folgendem Code auch hingebracht, dass der Text " Aufnahme ab" mittig zentriert ist:

html: <div class="mittig" id="aufnahme1"><label for="Aufnahme ab">Aufnahme ab</label></div>

CSS:

CSS

body {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #009900;
text-align: center;
font-size: 16px;
}

.mittig {
display: table;
width: 100%;
height: 35px;
}

label {
display: table-cell;
vertical-align: middle;
}

#aufnahme1 {
position: absolute;
left: 39px;
top: 56px;
border: 2px dotted #990000;
width: 171px;
height: 35px;
}

Alles anzeigen

Das passt jetzt mal und wird zentriert.

Hernach folgt jedoch mit folgendem Code das eigentliche Eingabefeld:

html:

HTML

<div id="aufnahme2"><span id="sprytextfield1">
<Input name="Aufnahme" type="text" id="Aufnahme" size="15">
<span class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</span><span class="textfieldInvalidFormatMsg">Ungültiges Format.</span></span></div>

CSS:

CSS

#aufnahme2 {
position: absolute;
left: 217px;
top: 56px;
border: 2px dotted #990000;
width: 131px;
height: 35px;
}

Diese Eingabefeld soll im umgebenden Rahmen auch vertikal zentriert sein. Das bekomme ich jedoch mit keiner der genannten Varianten hin. Wie schaffe ich es, dass das Eingabefeld selbst auch zentriert wird, oder was mache ich hier falsch? Muss ich hier den diversen Elementen des Formulars im HTML (label, Input, select, Option etc.) die Eigenschaft Display: inline- block vergeben, damit sie sich wie Block-Elemente verhalten und ich sie mit dem o. a. Code genau so wie das Div Element (das ja ein Block Element ist) vertikal zentrieren kann?

Danke für die Hilfe.

LG aus Österreich.

MrMurphy

Zitat

was mache ich hier falsch

Du verstößt gegen die HTML-Regeln und verwendest sinnfrei CSS. Das funktioniert nicht.

Als HTML sehe ich bei dir

Code

<form action="Anwendungen/send_email.php" method="post" enctype="application/x-www-form-urlencoded" name="Anmeldeformular" id="Anmeldeformular">
   <h1>Antragsformular</h1>
   <div>
      <label for="aufnahme_ab">Aufnahme ab</label>
      <input id="aufnahme_ab" name="Aufnahme" type="text">
      <p class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</p>
      <p class="textfieldInvalidFormatMsg">Ungültiges Format.</p>
   </div>
</form>

Der Rest ist dann CSS. Wobei an Hand deiner Quellcodeschnipsel keine konkrete Hilfe möglich erscheint.

Spider67

Hallo,

vielleicht könntest Du mir bitte näher erklären, wo mein HTML falsch ist bzw. das CSS siinlos.

Funktionieren tut es jedenfalls so einwandfrei. Nur - wie schon geschrieben - beim Textfeld selbst habe ich das noch nicht hinbekommen.

Darum ja meine Frage, ob ich hier die Inline Elemente vorher mit Display: inline-block auszeichnen muss, damit ich sie auch so zentrieren und anordnen kann? Danke für die Hilfe.

MrMurphy

Ich habe doch sogar ein Beispiel erstellt. Überflüssige Elemente sind nach den HTML-Regeln unzulässig.

Und offensichtlich funktioniert dein Quelltext nicht einwandfrei.

Vergiß "display: inline-block" und die position-Angaben. Die stammen aus finsterster Vergangenheit und behindern responsives Layout eher als das sie helfen. Solche CSS-Möglichkeiten existieren nur noch, damit alte Webseiten noch angezeigt werden.

Beschäftige dich mit (lerne) statt dessen Flexbox (display: flex).

Spider67

Als Laie und Autodidakt, der nebenbei eine Seite betreibt, habe ich keine Zeit mich mit Flexbox oder dgl. zu beschäftigen geschweige denn die Dinge zu lernen. Mein Code dürfte funktionieren, da er das anzeigt, was ich möchte. Bei den label Elementen passt das wie gesagt schon sehr gut, bei den eigentlichen Textfeldern noch nicht. Diese verhalten sich eben wie Inline Elemente, was die Gestaltung und Positionierung mittels CSS natürlcih erschwert.

Daher meine Idee mit display: inline-block. Dafür wollte ich Hilfe haben, ob das so funktioniert oder nicht.

Danke dafür.

Gastl

Zitat von Spider67

Als Laie und Autodidakt, der nebenbei eine Seite betreibt, habe ich keine Zeit mich mit Flexbox oder dgl. zu beschäftigen geschweige denn die Dinge zu lernen.

Wer keine Hilfe möchte, dem sollte man dann auch nicht dazu zwingen.

Spider67

Im Gegenteil für Hilfe bin ich sehr dankbar. ICh wollte aber eigentlich wissen, ob mein Ansatz mit display: inline-block funktioniert, und ich dann die Eingabefelder ebenfalls als Blockelemente mit CSS formatieren und vor allem positionieren kann?

Das wäre meine Bitte und eine große Hilfe.

MrMurphy

Nein, das funktioniert nicht.

Spider67

Hallo,

dann verstehe ich nicht, warum in meinem CSS Buch von Peter Müller (Einstieg in CSS) in dem auch Html 5 und CSS 3 behandelt wird, definitiv erklärt wird, dass bei "Inline Block-Boxen" sämtliche Box-Modell Eigenschaften verwendet werden können. Außer die Collapsing margin Eigenschaften und Einschränkungen bei der Eigenschaft width, können height, padding und border genau wie bei Block-Boxen eingesetzt werden.

Wieso also sollte mein Ansatz dann nicht funktionieren, bzw. funktioniert die Positionierung ja ohnehin bereits soweit? das einzige was noch stört, ist wie angeführt die Tatsache, dass das Textfeld am oberen Rand der umgebenden Box (dem boarder klebt und nicht in der Mitte der Box). Und dafür suche ich eine Lösung.

Danke vorab.

Spider67

Hat noch jemand eine Lösung oder einen konstruktiven Vorschlag für mein Problem?

Danke dafür!!

Spider67

Hallo,

ich habe mich jetzt doch mal mit der Flexbox beschäftigt, allerdings bei einer Bildergalerie. Das funktioniert auch ganz toll und ist doch nicht so komliziert wie ich dachte. Danke jedenfallls für die Anregung, ich werde das beim Formular auch mal versuchen.