Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
A fost lansat Fedora 40

Samsung S24 plus

Imi iau un Dell? (Vostro vs others)

Abonati Qobuz?
 transport -tren

Platforma electronica de eviden&#...

Cot cu talpa montat stramb in per...

Sfat achizitie sistem audio pentr...
 tavan fals rigips

Ce preferați: produse mai scumpe ...

Demagnetizare (minimala) ori ba?

Cum pot sa vad pe un proiector pr...
 Joc Drone

Dropshipping

Sfat achizitie AC Gree Fairy vs P...

MONITOR LG fara sonor !
 

aliniere verticala DIV

- - - - -
  • Please log in to reply
9 replies to this topic

#1
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
Daca vreau sa pozitionez Vertical un DIV (cu o inaltime stabilita) pe centrul paginii, fara sa folosesc javascript, doar din CSS, ce e de facut? Deocamdata n-am facut decat sa dau dau inaltime 100% div-ului parinte si sa stabilesc margin-top, tot procentual (sa zic 20%) pentru div-ul de aliniat, asa incat la rezolutii mari sa nu fie cocotat in partea de sus a paginii. Dar e ok practica asta?

#2
alin19

alin19

    Active Member

  • Grup: Members
  • Posts: 1,338
  • Înscris: 03.01.2007

 Alta_, on 12th April 2010, 09:24, said:

Daca vreau sa pozitionez Vertical un DIV (cu o inaltime stabilita) pe centrul paginii, fara sa folosesc javascript, doar din CSS, ce e de facut? Deocamdata n-am facut decat sa dau dau inaltime 100% div-ului parinte si sa stabilesc margin-top, tot procentual (sa zic 20%) pentru div-ul de aliniat, asa incat la rezolutii mari sa nu fie cocotat in partea de sus a paginii. Dar e ok practica asta?
Uite mie practica aceasta mi se pare ok :

http://www.jakpsatwe...r-solution.html

Edited by alin19, 12 April 2010 - 09:36.


#3
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
Mersi mult, a mers ce era acolo cu mici modificari; de exemplu faza cu top:-50%, nu a mers la mine, a trebuit sa specific in pixeli (dar nu e problema caci inaltimea div-ului de aliniat vertical este fixa, asa ca am impartit-o la 2).

#4
neobluenet

neobluenet

    Member

  • Grup: Members
  • Posts: 489
  • Înscris: 13.08.2004

 Alta_, on 12th April 2010, 11:50, said:

Mersi mult, a mers ce era acolo cu mici modificari; de exemplu faza cu top:-50%, nu a mers la mine, a trebuit sa specific in pixeli (dar nu e problema caci inaltimea div-ului de aliniat vertical este fixa, asa ca am impartit-o la 2).
Pai daca pui in pixeli nu mai ii fix pe mijloc, ca eu poate am alta rezolutie decat ai tu. top trebuie sa ia ca valoare absoluta una pozitiva, la fel si left. Trebuie sa pui top:50%; left:50%; margin: -{div-height}/2px auto auto -{div-width}/2px; si trebuie sa mearga.

PS in loc de {div-...} pui ce valoare are inaltimea / latimea div-ului.

#5
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007

 neobluenet, on 12th April 2010, 22:49, said:

Pai daca pui in pixeli nu mai ii fix pe mijloc, ca eu poate am alta rezolutie decat ai tu. top trebuie sa ia ca valoare absoluta una pozitiva, la fel si left. Trebuie sa pui top:50%; left:50%; margin: -{div-height}/2px auto auto -{div-width}/2px;
O sa incerc si varianta ta, e cam aceeasi idee, doar ca folosesti "margin".

In pixeli am specificat cu cat sa se ridice in sus DIV-ul "problema" fata de linia de mijloc a ecranului (50% din Height-ul ferestrei), ceva de genul:

#div_median {position: absolute; top: 50%;}
#div_de_aliniat {position:relative; top:-([height]/2)px;}

Edited by Alta_, 12 April 2010 - 23:31.


#6
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 398,284
  • Înscris: 08.10.2015
position:absolute;
top:50%;
left:50%;
margin-left:(width/2)px;
margin-top:(height/2)px

Și asta fără țâșpe div-uri suplimentare :)

#7
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
@i0nutzb
Pare logic ce e mai sus, insa nu-mi merge asa, se duce in div-ul in dreapta jos. Nu stiu ce-mi scapa, testeaza si tu linia asta, sa vezi ca e asa cum zic:

<div id="intro" style="position:absolute; top:50%; left:50%; margin-left:422px; margin-top:255px; width:844px; height:510px; border: solid 1px #444;">
de aliniat pe mijlocul ecranului
</div>


#8
MonK3y

MonK3y

    Member

  • Grup: Members
  • Posts: 412
  • Înscris: 02.09.2005
<div id="intro" style="position:absolute; top:50%; left:50%; margin-left:-422px; margin-top:-255px; width:844px; height:510px; border: solid 1px #444;">
de aliniat pe mijlocul ecranului
</div>

Edited by MonK3y, 16 April 2010 - 21:59.


#9
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
Corect, am uitat de minus! Merge in toate browserele. Va multumesc.

#10
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 398,284
  • Înscris: 08.10.2015
dap, am uitat să pun minusul în față. Scuze.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate