Matthias Scharwies: Mein Button wird nicht mittig angezeigt

Beitrag lesen

SELF-Forum

Mein Button wird nicht mittig angezeigt

Matthias Scharwies (Versionen)
+1 Informationen zu den Bewertungsregeln

Servus!

Hallo,

ich wollte das in einem fiddle darstellen, aber dort ist das Ergebnis anders als bei mir im HTML-Editor, daher kann ich hier leider niur mit dem Quelltext dienen jund hoffe, das hilft auch.

Das Ergebnis im fiddle ist das richtige. Ein HTML-Editor zeigt in seiner Vorschau nur eine Vorschau. Deshalb muss immer in einem Fiddle und/oder in verschiedenen Browsern getestet werden.

Ich hätte den button mittig unterhalb der beiden DIVs erwartet, aber er ist mittig unterhalb des linksn Divs.

Bei mir FF55 auf einem Monitor mit 2560px Breite hast du 2 Blöcke mit je 47% Breite (plus je 2x10px padding) und dazwischen Deinen Button.

Kann mir einer erklären, warum das so ist ujnd wie ich es ändern muß?

Die beiden divs sollen wohl die gesamte Breite einnehmen. Dies würde ich mit 50% breiten Boxen erriechen. Dafür müssen die paddings aber zur Breite zugezählt werden, was man mit box-sizing erreicht:

html { 
  box-sizing: border-box; 
} 
*, ::before, ::after { box-sizing: inherit; }

.n_l {    
  border-right: 1px solid #000000;    
  padding:10px;    
  width: 50%;    
  float:left;    
  background: red;
}
.n_r {    
  padding:10px;    
  width: 50%;    
  background: green;  
}

So haben die beiden divs je 50% Breite.

Dein div class="wrap" hat nur das form-Element als zentriertes Kindelement. Du könntest den button mit


button {    
  margin: 0 auto
}

zentrieren.

BTW: Dein HTML-Markup sieht etwas alt aus:

  • HTML-Elemente werden mittlerweile klein geschrieben
  • Verwende das HTML5-Grundgerüst
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <title>Test</title>
  ...

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
Beitrag melden
+1
Informationen zu den Bewertungsregeln