nicht angemeldet
Mehrere Container nebeneinander horizontal zentrieren
0 0 0 0 0 0 0 0 0 
Matthias Apsel
0
0
Mehrere Container nebeneinander horizontal zentrieren
Der MartinHallo,
wie kann ich erreichen, dass im nachfolgenden Beispiel die span-Container mittig entriert werden, also so:
Text1 <bild> Text3
Wobei statt text jeweils auch ein Bild stehen kann und umgekehrt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mehrere Container nebeneinander horizontal zentrieren</title>
<style>
div.zentriert {
margin-left: auto; margin-right: auto; width: 99%;
}
</style>
</head>
<body>
<div class="zentriert">
<span>Text1 </span><span><img src="bild.jpg" /></span><span>Text3</span>
</body>
</html>
Schöne Grüße
Yann
-
Hello,
wie kann ich erreichen, dass im nachfolgenden Beispiel die span-Container mittig entriert werden, also so:
Text1 <bild> Text3
Wobei statt text jeweils auch ein Bild stehen kann und umgekehrt.Ist <span> die richtige Wahl für augenscheinliche Blockelemente?
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Ist <span> die richtige Wahl für augenscheinliche Blockelemente?
Wenn ich div verwende, stehen die Elemente untereinander.
Mit der Angabe von inline-block ist es ebensowenig zentriert.
G.
Yann-
Hello,
Ist <span> die richtige Wahl für augenscheinliche Blockelemente?
Wenn ich div verwende, stehen die Elemente untereinander.
Mit der Angabe von inline-block ist es ebensowenig zentriert.Ich weiß nicht, ob es richtig ist, aber ich würde mit drei DIV-Elementen experimentieren.
Stichworte:
- display:inline-block
- width:
- float:
- margin-left:auto
- margin-right:auto
auf welches Element Du welches CSS-Attribut anwendest, könntest Du ja mal ausprobieren.
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Hi,
Ich weiß nicht, ob es richtig ist, aber ich würde mit drei DIV-Elementen experimentieren.
Ich bin überrascht!
Ich hätte angenommen, dass dies eine triviale Geschichte ist, die schon zig-Male vorkam.
Dass man in der Webseitenerstellung experimentieren muss, das überrascht mich noch mehr!
Ich werde also morgen den Experimentierkasten öffnen;-)
Schönen Gruß
Yann-
Hello,
Hi,
Ich weiß nicht, ob es richtig ist, aber ich würde mit drei DIV-Elementen experimentieren.
Ich bin überrascht!
Ich hätte angenommen, dass dies eine triviale Geschichte ist, die schon zig-Male vorkam.
Dass man in der Webseitenerstellung experimentieren muss, das überrascht mich noch mehr!
Ich werde also morgen den Experimentierkasten öffnen;-)So könnte es gehen.
Was Du nun in die DIVs rein tust, müsste wieder relativ egal sein...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title><style type="text/css">
#main{ border:1px solid blue; text-align:center; } #left{ width:200px; height:300px; border:1px solid red; display:inline-block; } #center{ width:200px; height:300px; border:1px solid red; margin-left:10px; margin-right:10px; display:inline-block; } #right{ width:200px; height:300px; border:1px solid red; display:inline-block; } </style></head>
<body><div id="main"> <div id="left">1</div> <div id="center">2</div> <div id="right">3</div> </div></body>
</html>Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
Hello,
Test für https://forum.selfhtml.org/?t=216827&m=1487866:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Beschreibung der Seite</title> <style type="text/css"> #main{ border:1px solid blue; text-align:center; } #left{ width:200px; height:300px; border:1px solid red; display:inline-block; } #center{ width:200px; height:300px; border:1px solid red; margin-left:10px; margin-right:10px; display:inline-block; } #right{ width:200px; height:300px; border:1px solid red; display:inline-block; } </style> </head> <body> <div id="main"> <div id="left">1</div> <div id="center">2</div> <div id="right">3</div> </div> </body> </html>Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
-
-
Hi,
Ich bin überrascht!
Ich hätte angenommen, dass dies eine triviale Geschichte ist, die schon zig-Male vorkam.Tat sie ja auch.
Dass man in der Webseitenerstellung experimentieren muss, das überrascht mich noch mehr!
Dass du bei deiner bisherigen Recherche zu dem schon millionenfach diskutierten Thema „Zentrieren mit CSS“ die Lösung noch nicht gefunden hast, ist das Überraschendste überhaupt!
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Hi
Dass du bei deiner bisherigen Recherche zu dem schon millionenfach diskutierten Thema „Zentrieren mit CSS“ die Lösung noch nicht gefunden hast, ist das Überraschendste überhaupt!
Ja, Lösungen, wie Tom hier vorgeschlagen hat, habe ich gefunden:
Fest definierte Breiten der Container.
Was aber, wenn die Breite erst durch eine Eingabe bestimmt wird?| <== Mitte des Screens
Heute:
| Text1 | Bild1 | Text2 |
Morgen:
| Text1 | Text2 | Text3 |Übermorgen:
|t1|t2|t3|Gruß
YannPS: </div> habe ich schlicht und einfach vergessen!
-
Hi,
ich korrigiere und bedanke mich.Es klappt auch ohne die width-Angabe.
Gruß
Yann -
Om nah hoo pez nyeetz, Yann!
Was aber, wenn die Breite erst durch eine Eingabe bestimmt wird?
| <== Mitte des Screens
Heute:
| Text1 | Bild1 | Text2 |
Morgen:
| Text1 | Text2 | Text3 |Übermorgen:
|t1|t2|t3|Dann nimmst du text-align: center für ein umgebendes Element, wie schon vorgeschlagen. Wenn ein bisschen hübscher sein darf, tut es display: table-cell oder auch flexbox.
Matthias
-
-
-
-
Hi,
Ist <span> die richtige Wahl für augenscheinliche Blockelemente?
Wenn ich div verwende, stehen die Elemente untereinander.
Unfug, die Wahl der Elemente hat nichts mit der Formatierung zu tun.
Mit der Angabe von inline-block ist es ebensowenig zentriert.
Warum sollte es auch?
Inline-Inhalte lassen sich über text-align im Elternelement zentrieren.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
-
-
-
Hallo,
<div class="zentriert">
<span>Text1 </span><span><img src="bild.jpg" /></span><span>Text3</span>
</body>Hat es einen Grund, warum dein div-Element nicht geschlossen ist?
Gruß
Kalk-
Hi,
<div class="zentriert">
<span>Text1 </span><span><img src="bild.jpg" /></span><span>Text3</span>
</body>> Hat es einen Grund, warum dein div-Element nicht geschlossen ist? vermutlich zur besseren Belüftung des Inhalts. \*scnr\* Martin -- Liebet eure Feinde - vielleicht schadet das ihrem Ruf. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hello,
<div class="zentriert">
<span>Text1 </span><span><img src="bild.jpg" /></span><span>Text3</span>
</body>> > Hat es einen Grund, warum dein div-Element nicht geschlossen ist? > > vermutlich zur besseren Belüftung des Inhalts. Du meinst also: Duchlüftete Inhalts Verpackung? ^ ^ ^ > \*scnr\* ebenso: \*scnr\* Liebe Grüße aus dem schönen Oberharz Tom vom Berg  -- ☻\_ /▌ / \ Nur selber lernen macht schlau <http://bikers-lodge.com>
-
-
