Hur flyttar jag min DIV-tag till mitten?

2011-03-16 17:29

Permalänk

SuitUp

Medlem

Plats: Göteborg
Registrerad: Jun 2010

●

Hur flyttar jag min DIV-tag till mitten?

Tja!

Är nybörjare inom CSS och har kollat runt i en hel del trådar här på forumet där jag hittat mycket, men har en fråga som jag antar är rätt "basic". Allt jag har gjort är att jag satt en bakgrundsfärg och sedan lagt in en bild via en DIV-tag, denna DIV vill jag lägga precis i mitten av hela sidan. Med koden jag har nu lägger den sig i mitten sett till bredden men inte höjden, ej lyckats flytta ner den.

CSS:

body
{
background: rgb(250,0,0);
color: black;
margin:0;
padding:100px, 0px, 0px, 0px;
}

#content
{
margin:0 auto;
width: 600px;
}

img.center
{
display:block;
margin:0 auto;
}

Insättningen i HTML:

<div id="content" >
<img src="content.png" alt="" width="600" height="300" class="center"/>
</div>

Tack på förhand!

Rapportera Redigera

Citera flera Citera

2011-03-16 17:33

Permalänk

SayZk

Medlem ★

Plats: Göteborg
Registrerad: Jun 2009

●

När du väljer margin 0 så lägger den väl sig länst uppe i vänstra hörnet? Har för mig att det är margin som påverkar hur den ligger jämf mot andra sidor.
Testa margin: auto;

Visa signatur

[ i7 8700k | MSI Z370 Krait | 16GB | MSI 3080 Ventus 3X OC ]

Rapportera Redigera

Citera flera Citera

2011-03-16 17:37

Permalänk

SuitUp

Medlem

Plats: Göteborg
Registrerad: Jun 2010

●

Skrivet av SayZk:

När du väljer margin 0 så lägger den väl sig länst uppe i vänstra hörnet? Har för mig att det är margin som påverkar hur den ligger jämf mot andra sidor.
Testa margin: auto;

Gå till inlägget

Detta har du helt rätt i!

Dum som jag är hade jag inte testat

padding-top: 300px;

i min DIV.

Kan denna metod få några konsekvenser? Till exempel annorlunda resultat på en mindre/större skärm?
Tack på förhand!

Rapportera Redigera

Citera flera Citera

2011-03-16 18:26

Permalänk

nemrod

Medlem

Plats: Karlskrona
Registrerad: Dec 2003

●

Skrivet av SuitUp:

Detta har du helt rätt i!

Dum som jag är hade jag inte testat

padding-top: 300px;

i min DIV.

Kan denna metod få några konsekvenser? Till exempel annorlunda resultat på en mindre/större skärm?
Tack på förhand!

Gå till inlägget

Det där är ju statiskt 300px från toppen, det kommer alltså bli fel om du har en annan storlek på fönstret (annan upplösning exempelvis). Det finns inget sätt att centrera en bild vertikalt i CSS eftersom vertical-align bara fungerar på tabeller. Det finns dock en liten workaround som går ut på att man använder display: table och display: table-cell på andra element än tabeller för att sedan kunna använda vertical-align.

Det här är från en mycket gammal HTML-fil som bara innehöll just en bild som var centrerad på båda hållen och inget annat, make of it what you want:

body {
	text-align: center;
} #cont {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: table;
	position: fixed;
	vertical-align: middle;
} img {
	display: block;
	margin: 1em auto;
} p {
	display: table-cell;
	vertical-align: middle;
}

<body> 
	<div id="cont"> 
		<p> 
			<img src="" alt="" /> 
		</p> 
	</div> 
</body>

Rapportera Redigera

Citera flera Citera

2011-03-16 19:17

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Se exempelvis här och här för information om hur man centrerar element vertikalt med CSS. Kom ihåg att det kan bli hemskt om innehållet blir högre än fönstret.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!