Auf Thema antworten 2026

Beitrag

<blockquote data-quote="_tnt_" data-source="post: 2046618" data-attributes="member: 19533">Hallo,ich möchte gerne einen div in einem div zentrieren.Ich habe drei Boxen a 250px + padding. Jetzt hätte ich gerne, dass sich der umschließende container genau in der Mitte der Seite zentriert.Ich könnte jetzt die Breite der Boxen + das padding ausrechnen und dann den container auf diese größe einstellen und mit margin auto zentrieren.Mir stellt sich aber die Frage, ist es möglich, dass CSS automatisch die Größe des &quot;top&quot; divs erkennt und diesen in der Mitte der Seite zentriert.Außerdem, ist es möglich, dass der &quot;header&quot; und &quot;footer&quot; automatisch die breite des &quot;main&quot; bereichs übernehmen?oder anders gefragt, wie würdet ihr an die Sache ran gehen?Gruß_tnt_[HTML]&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;FotoPort&lt;/title&gt;&lt;link href=&quot;style.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;container&quot;&gt;&lt;!-- -----|----- HEADER -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FotoPort&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Random Picture //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;!-- -----|----- MAIN -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- ----- TOP ----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;top&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;left-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-tl&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;middle-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-tm&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;right-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-tr&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;clr&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- -----BOTTOM ----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;top&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;left-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-bl&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;middle-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-bm&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;right-distance&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;color-br&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;text&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&lt;br&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;clr&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&lt;!-- -----|----- FOOTER -----|----- --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;cen&quot;&gt;Impressum | Wicket v.&lt;wicket:container wicket:id=&quot;version&quot;&gt;1.5-SNAPSHOT&lt;/wicket:container&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML][CODE]body{&nbsp; &nbsp; background: rgb(0, 0, 0);&nbsp; &nbsp; color: rgb(255, 255, 255);&nbsp; &nbsp; font-family: sans-serif;&nbsp; &nbsp; font-size: 15px;}#container{}#header{&nbsp; &nbsp; background: rgb(14, 14, 14);&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; border: 1px solid rgb(6, 68, 108);&nbsp; &nbsp; padding: 5px;}#main{&nbsp; &nbsp; background: rgb(14, 14, 14);&nbsp; &nbsp; border: 1px solid rgb(6, 68, 108);}#footer{&nbsp; &nbsp; background: rgb(14, 14, 14);&nbsp; &nbsp; border: 1px solid rgb(6, 68, 108);&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-size: 12px;}#text{&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; height: 250px;&nbsp; &nbsp; padding: 10px;}#color-tl{&nbsp; &nbsp; background: rgb(30, 30, 30);}#color-tm{&nbsp; &nbsp; background: rgb(50, 50, 50);}#color-tr{&nbsp; &nbsp; background: rgb(70, 70, 70);}#color-bl{&nbsp; &nbsp; background: rgb(90, 90, 90);}#color-bm{&nbsp; &nbsp; background: rgb(110, 110, 110);}#color-br{&nbsp; &nbsp; background: rgb(130, 130, 130);}#left-distance{&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 5px;}#middle-distance{&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; }#right-distance{&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 5px;}.clr{ &nbsp; &nbsp; clear: both; }.cen{&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; margin: 0px;}[/CODE]</blockquote>

[QUOTE="_tnt_, post: 2046618, member: 19533"] Hallo, ich möchte gerne einen div in einem div zentrieren. Ich habe drei Boxen a 250px + padding. Jetzt hätte ich gerne, dass sich der umschließende container genau in der Mitte der Seite zentriert. Ich könnte jetzt die Breite der Boxen + das padding ausrechnen und dann den container auf diese größe einstellen und mit margin auto zentrieren. Mir stellt sich aber die Frage, ist es möglich, dass CSS automatisch die Größe des "top" divs erkennt und diesen in der Mitte der Seite zentriert. Außerdem, ist es möglich, dass der "header" und "footer" automatisch die breite des "main" bereichs übernehmen? oder anders gefragt, wie würdet ihr an die Sache ran gehen? Gruß _tnt_ [HTML] <!DOCTYPE html> <html> <head> <title>FotoPort</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="container">  <div id="header"> FotoPort // Random Picture // </div>  <div id="main">  <div id="top"> <div id="left-distance"> <div id="color-tl"> <div id="text"> test test test </div> </div> </div> <div id="middle-distance"> <div id="color-tm"> <div id="text"> test test test </div> </div> </div> <div id="right-distance"> <div id="color-tr"> <div id="text"> test test test </div> </div> </div> <div class="clr"></div> </div>  <div id="top"> <div id="left-distance"> <div id="color-bl"> <div id="text"> test test test </div> </div> </div> <div id="middle-distance"> <div id="color-bm"> <div id="text"> test test test </div> </div> </div> <div id="right-distance"> <div id="color-br"> <div id="text"> test test test </div> </div> </div> <div class="clr"></div> </div> </div>  <div id="footer"> <a class="cen">Impressum | Wicket v.<wicket:container wicket:id="version">1.5-SNAPSHOT</wicket:container></a> </div> </div> </body> </html> [/HTML] [CODE] body{ background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-family: sans-serif; font-size: 15px; } #container{ } #header{ background: rgb(14, 14, 14); height: 50px; border: 1px solid rgb(6, 68, 108); padding: 5px; } #main{ background: rgb(14, 14, 14); border: 1px solid rgb(6, 68, 108); } #footer{ background: rgb(14, 14, 14); border: 1px solid rgb(6, 68, 108); padding: 5px; text-align: center; font-size: 12px; } #text{ width: 250px; height: 250px; padding: 10px; } #color-tl{ background: rgb(30, 30, 30); } #color-tm{ background: rgb(50, 50, 50); } #color-tr{ background: rgb(70, 70, 70); } #color-bl{ background: rgb(90, 90, 90); } #color-bm{ background: rgb(110, 110, 110); } #color-br{ background: rgb(130, 130, 130); } #left-distance{ float: left; padding: 5px; } #middle-distance{ float: left; padding: 5px; } #right-distance{ float: left; padding: 5px; } .clr{ clear: both; } .cen{ text-align: center; padding: 0px; margin: 0px; } [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?