Mein Button wird nicht mittig angezeigt
bearbeitet vonServus!
> 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](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing) erreicht:
~~~CSS
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
~~~CSS
button {
margin: 0 auto
}
~~~
zentrieren.
BTW: Dein HTML-Markup sieht etwas alt aus:
* HTML-Elemente werden mittlerweile klein geschrieben
* Verwende das HTML5-[Grundgerüst](http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundger%C3%BCst)
~~~HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<title>Test</title>
~~~
* statt `input type="button"` verwendet man im allgemeinen das [button](https://wiki.selfhtml.org/wiki/HTML/Formulare/Button)-Element
- <https://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/>
* Du könntest anstelle von float [Flexbox](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox) oder das [Grid layout verwenden](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}
Mein Button wird nicht mittig angezeigt
bearbeitet vonServus!
> 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](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing) erreicht:
~~~CSS
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
~~~CSS
button {
margin: 0 auto
}
~~~
zentrieren.
BTW: Dein HTML-Markup sieht etwas alt aus:
* HTML-Element werden mittlerweile klein geschrieben
* statt `input type="button"` verwendet man im allgemeinen das [button](https://wiki.selfhtml.org/wiki/HTML/Formulare/Button)-Element
- <https://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/>
* Du könntest anstelle von float [Flexbox](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox) oder das [Grid layout verwenden](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid)
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}