CSS { margin: auto auto; }

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS:

Moderatori: eyecon, Moderatori

scazi
PHPRomania Supporter
Mesaje: 9
Membru din: Mie Sep 13, 2006 5:53 pm
Localitate: Bucuresti
Contact:

CSS { margin: auto auto; }

Mesajde scazi » Mar Ian 01, 2008 4:39 pm

Conform specificaţiilor W3 proprietatea margin poate lua ca valori fie "length" fie valoarea "auto":

Am urmatoarea sectiune de cod:

<!-- exemplul 1 -->
<div id="continut" style="width: 600px; height: 400px; background: yellow;">
<div id="patratel-colorat" style="width: 100px; height: 100px; margin: 0px auto; background: red; ">
</div>
</div>

Si se obtine rezultatul urmator:
img244{dot}imageshack{dot}us/my{dot}php?image=printscreenpd4{dot}png
Deci margin-left si margin-right setate la auto inseamna ca imi centreaza patratelul in interiorul div-ului galben.

Dar apoi am:

<!-- exemplul 2 -->
<div id="continut" style="width: 600px; height: 400px; background: yellow;">
<div id="patratel-colorat" style="width: 100px; height: 100px; margin: auto auto; background: green; ">
</div>
</div>

Si se obtine:
img145{dot}imageshack{dot}us/my{dot}php?image=printscreen2wv6{dot}png
Practic aceeasi chestie. De ce nu reactioneaza la fel si cand ii dau margin-top si margin-bottom auto ca si in cazul lui margin-left si margin-right? Eu ma asteptam ca in cazul codului 2 patratelul verde sa se aseze frumos chiar in mijloc (atata pe orizontala dar si pe verticala).

Eu am rezolvat chestia asta printr urmatorul cod:
<table><tr><td align="center" valign="middle"></td></tr></table>
Insa as vrea ceva mai "elegant".

Multumesc.

PS: Imi pare rau ca nu pot sa fac link catre poze dar nu am mai mult de 5 mesaje in acest forum si nu mi se permite acest lucru. Va trebui sa va chinuiti sa dati copy/paste in browser si sa inlocuiti {dot} cu . Va multumesc.



andrei009
Senior Member
Mesaje: 211
Membru din: Vin Mar 16, 2007 12:44 pm

Mesajde andrei009 » Mar Ian 01, 2008 11:51 pm

nu poti sa centrezi un div pe verticala cu margin:auto;
uite o solutie

scazi
PHPRomania Supporter
Mesaje: 9
Membru din: Mie Sep 13, 2006 5:53 pm
Localitate: Bucuresti
Contact:

Mesajde scazi » Mie Ian 02, 2008 11:02 pm

Mulţumesc pentru link, dar pare mult prea complicat :) O să rămân la <td valign="middle">

andrei009
Senior Member
Mesaje: 211
Membru din: Vin Mar 16, 2007 12:44 pm

Mesajde andrei009 » Joi Ian 03, 2008 2:04 pm


scazi
PHPRomania Supporter
Mesaje: 9
Membru din: Mie Sep 13, 2006 5:53 pm
Localitate: Bucuresti
Contact:

Mesajde scazi » Joi Ian 03, 2008 4:48 pm


Pirahna
Senior Member
Mesaje: 5985
Membru din: Dum Aug 22, 2004 2:04 am
Localitate: la birou
Contact:

Mesajde Pirahna » Joi Ian 03, 2008 8:06 pm

|

whooper
Senior Member
Mesaje: 866
Membru din: Mar Apr 05, 2005 9:58 pm
Localitate: Toronto ON

Mesajde whooper » Joi Ian 03, 2008 8:48 pm

Join The Forums - Time Well Wasted!


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 8 vizitatori