Keskustelu: Nettisivujen teko: Pystysuuntainen keskitys

punppis [02.05.2008 02:02:43]

Miten olisi järkevintä toteuttaa esim. 100x100 pikselin kokoinen div, joka olisi keskikohdassa niin pysty-, kuin vaaka-akselillakin. Koitin laittaa parentin heightiä 100%:iin, mutta eipä veny laatikko :(

Merri [02.05.2008 05:53:25]

Käytettäessä standardimoodia tehdään vaikka näin:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title></title>
		<style type="text/css">
html,body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

#parent
{
	background: #000;
	display: table;
	height: 100%;
	margin: 0 auto;
	width: 100%;
}

#child
{
	display: table-cell;
	vertical-align: middle;
}

#box
{
	background: #FFF;
	height: 100px;
	margin: 0 auto;
	width: 100px;
}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="child">
				<div id="box"></div>
			</div>
		</div>
	</body>
</html>

http://kontu.selfip.info/html.css.js/punppis_keskitys.html

Tosin ongelmana tässä nyt on se, että lopputulos ei toimi IE7:llä ja vanhemmilla. IE8:n betalla toimii. Jos tahtoo että homma pelittää myös IE:llä, niin HTML-osio muuttuu näin:

	<body>
		<table id="parent"><tr>
			<td id="child">
				<div id="box"></div>
			</td>
		</tr></table>
	</body>

Lisäksi CSS:ssä tarvinnee laittaa border-collapse: collapse; #parentille. Tietty voisi myös käyttää expressionia ja tarjoilla omaa CSS:ää ehdollisilla kommenteilla ettei tarvitsisi HTML:ään taulukkoa "turhaan" tunkea, mutta se vaatii hieman enemmän miettimistä ja kikkailua, että toiminnallisuus olisi identtinen muiden selainten kanssa.

Matso [05.05.2008 11:13:09]

Kiinteän kokoisella laatikolla onnistuu näin helposti:

.box{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

punppis [06.05.2008 13:48:29]

Matso kirjoitti:

Kiinteän kokoisella laatikolla onnistuu näin helposti:

.box{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Eikös tuo laita VASEMMAN REUNAN 50% päähän näytön vasemmasta reunasta ja YLÄREUNAN 50% näytön yläreunasta, eli jos laatikon leveys ja korkeus vaikka 50% ruudun koosta, niin laatikko menee oikeaan alakulmaan, eikä keskelle.

E: No eipäs laitakkaan ;D En tajunnut nuita margineita.

Matso [06.05.2008 18:46:43]

punppis kirjoitti:

Matso kirjoitti:
Kiinteän kokoisella laatikolla onnistuu näin helposti:
.box{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
Eikös tuo laita VASEMMAN REUNAN 50% päähän näytön vasemmasta reunasta ja YLÄREUNAN 50% näytön yläreunasta, eli jos laatikon leveys ja korkeus vaikka 50% ruudun koosta, niin laatikko menee oikeaan alakulmaan, eikä keskelle.

E: No eipäs laitakkaan ;D En tajunnut nuita margineita.

Joo eli laitetaan se vasen ja ylä reuna 50%:iin ja sitten miinustellaan puolet sen boxin koosta niin että se saadaan keskelle.

peg [06.05.2008 19:38:28]

Joo ja tällainen ei toimi kunnolla vaikka olisi kiva.

.box{
  position: absolute;
  width: 20%;
  height: 20%;
  top: 50%;
  left: 50%;
  margin-top: -1%;
  margin-left: -10%;
  background-color: yellow;
}

mutta tällainen skaalautuu iellä ja fflla

.box1{
  position: absolute;
  width: 20%;
  height: 40%;
  top: 0%;
  left: 50%;
  margin-top: 0%;
  margin-left: -10%;
  background-color: red;
  background-color: blue;
}
.box{
  position: absolute;
  width: 20%;
  height: 20%;
  top: 40%;
  left: 50%;
  margin-top: -0%;
  margin-left: -10%;
  background-color: yellow;
}
.box2{
  position: absolute;
  width: 20%;
  height: 40%;
  top: 60%;
  left: 50%;
  margin-top: 0%;
  margin-left: -10%;
  background-color: red;
}

Mod. lisäsi kooditagit

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu