Div-Container mittig platzieren

esehigs · #1 (**permalink**) 07.09.2021, 16:00

Hallo Community,

ich habe ein Problem und komme einfach nicht dahinter. Ich möchte gerne den roten DIV-Container ("Roter Block") zentriert haben. Was mache ich falsch?

HTML-Code:

<html>
<head>
</head>
<body>
	<div style="text-align:center;line-height:100%;width:100%;height:100%;">
		
		<div style="width:100%;min-height:200px;background-color:#ffffff;">
			
			Mittiger Text
			
			<div style="width:300px;background-color:#ff0000;height:100px;">
				Roter Block
			</div>
			
		</div>
		
	</div>
</body>
</html>

Beste Grüße
esehis

protonenbeschleuniger · #2 (**permalink**) 07.09.2021, 16:13

Das geht z.b. so

HTML-Code:

<div style="margin:auto;width:300px;background-color:#ff0000;height:100px;">
Roter Block</div>

esehigs · #3 (**permalink**) 07.09.2021, 16:20

Zitat:

Zitat von protonenbeschleuniger

Das geht z.b. so

HTML-Code:

<div style="margin:auto;width:300px;background-color:#ff0000;height:100px;">
Roter Block</div>

SUPER! Vielen Dank!

basti1012 · #4 (**permalink**) 08.09.2021, 22:05

Zitat:

Zitat von esehigs

Was mache ich falsch?

Eigentlich viel.
Inline style benutzt man nicht mehr.
Dann kannst du das auch mit Flexbox machen.

HTML-Code:

<html>
<head>
<style>
body{
      display:flex;
      flex-direction:column;
}   
main {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
    align-items: center;
}
.rot{
      width:300px;
      height:100px;
      background:red;
}
</style>
</head>
<body>
		<main>
      <p>Mittiger Text</p>
      <div class="rot">
				  Roter Block
			</div>
		</main>
</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV Höhe 100%	Daniel86	CSS	12	29.07.2011 13:40
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 20:29
Zwei div container nebeneinander?	hattori_hanzo	CSS	2	08.03.2011 18:27
div mit css über andere elemente platzieren	ping	CSS	6	20.08.2009 14:54
div container nebeneinander platzieren	müsli	CSS	4	11.11.2007 17:14