Centrare div

#1
colombo2003

Posted 12 December 2014 - 13:38

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Ma chinui de ceva vreme si nu reusesc sa centrez un div.

Doresc sa imi afisez centrat pe latimea coloanei, o imagine si in dreapta ei, doua randuri, unul sub altul (pe unul temperature si pe celalalt starea), aceste randuri centrate pe vertical fata de imagine (sau nu neaparat).

In pagina php, in tagul <body>, acolo unde vreau sa se afiseze, am apelat un script

...
...
<?php echo $meteo_y; ?>
...
...

In scriptul cu pricina, afisarea o fac asa:

...
...
$re_html = '<img src="../meteo_files/'.$meteo_data['code'].'.gif" alt="'.$meteo_data['stare'].'"/>
		<p class="temp">'.$meteo_data['temp'].'</p><p class="stare">'.$meteo_data['stare'].'</p>';
...
...
...
$meteo_y = '<div id="meteo_y"><div id="meteo">'.$meteo_yahoo->yMeteoHTML().'</div>
<script type="text/javascript">
...
...
</script></div>';
}

In css, am incercat diverse (folosesc Mozilla Firebug), in fel si chip combinate.
Si cu float (left) si fara, si cu width (100% si auto) si fara, si cu display (block) si fara.

Ca sa centrez, am vazut undeva ca se foloseste display: flex si apoi justify-content: center combinat cu alte de genul align-content: center; align-items: center si item-self: center.
Si combinat si cu text-align: center.

Daca un folosesc display: flex (combinat cu celelate), atunci se centreaza, dar randul urmator (de stare) "sare" pe randul de temperatura (practice totul devine o singura linie, textele fiind lipite, unul in continuarea celuilalt)

Daca nu folosesc display: flex (fie block, sau deloc), as obtine ceea ce vrea (ca aranjare), dar totul aliniat la stanga coloanei (si nu centrat).

De-aia ma gandeam sa pun un div "meteo_y" cu display: flex (si celelalte) si restul sa fie cu display:block (sau fara), dar nici asa nu merge.

Am incercat in script si sa separ cele doua randuri cu <br> dar nu prea are effect.
Am incercat de asemenea si cu <p> si cu <span> (desi stiu diferenta intre ele), din nou, fara rezultatul dorit.

E ceva ce-mi scapa, dar nu-mi dau seama ce si unde. De aceea apelez la experienta voastra, si poate un ochi in plus, o idee...
Multumesc

Back to top

#2
RedDev

Posted 12 December 2014 - 13:45

Active Member

Grup: Members
Posts: 1,933
Înscris: 29.10.2014

Centrarea de obicei se face prin CSS cu margin:0 auto;

Back to top

#3
MooF2010

Posted 12 December 2014 - 13:52

Senior Member

Grup: Senior Members
Posts: 5,326
Înscris: 24.05.2010

margin-left:auto;
margin-right:auto;

astea in css

Back to top

#4
colombo2003

Posted 12 December 2014 - 14:22

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Desigur, in css. Acum tot incerc de zor si tot nu vrea sa-mi iasa... Posted Image

Am facut si combinatii cu position (pe care il uitasem)

Edited by colombo2003, 12 December 2014 - 14:23.

Back to top

#5
MooF2010

Posted 12 December 2014 - 15:28

Senior Member

Grup: Senior Members
Posts: 5,326
Înscris: 24.05.2010

ma cand ai <div id="unu"><div id="doi">...</div></div>

si in css ai #unu{width:100%;} #doi{margin-left:auto;
margin-right:auto;....}

div-ul doi va aparea pe centrul div-ului unu

Back to top

#6
mandix

Posted 12 December 2014 - 16:10

Junior Member

Grup: Members
Posts: 53
Înscris: 29.03.2013

Verifică width, padding. Nu are cum să nu se poziţioneze. Studiază div-urile mamă, posibil să plece de acolo problema.Undeva îi problema, dacă nu ascultă de margin:0 auto;
Dă-ne cod sa vedem că aşa iţi tot putem spune dacă tu poate cauţi greşeala în altă parte.

Back to top

Anunturi

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

Centrare div

#1 colombo2003 Posted 12 December 2014 - 13:38

#2 RedDev Posted 12 December 2014 - 13:45

#3 MooF2010 Posted 12 December 2014 - 13:52

#4 colombo2003 Posted 12 December 2014 - 14:22

#5 MooF2010 Posted 12 December 2014 - 15:28

#6 mandix Posted 12 December 2014 - 16:10

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 12 December 2014 - 13:38

#2
RedDev

Posted 12 December 2014 - 13:45

#3
MooF2010

Posted 12 December 2014 - 13:52

#4
colombo2003

Posted 12 December 2014 - 14:22

#5
MooF2010

Posted 12 December 2014 - 15:28

#6
mandix

Posted 12 December 2014 - 16:10