Dacă centrarea pe orizontală a unei casete (DIV) se poate face relativ simplu cu atributul „margin: 0 auto;”, pe verticală este puţin mai delicat, dar nu exagerat de dificil. Vom reda una din multiplele metode.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.div_centr_ext { display:block; position: relative; border:1px solid darkgray; width:300px; min-height:200px; margin:5px; padding:5px; box-shadow: 10px 10px 10px rgba(0, 0, 0, .4); border-radius:10px; margin:0 auto; } .div_centr_int { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width:90%; height: auto; font-size:1.2em; border:1px dashed lightgray; } @media only screen and (max-width: 600px) { .div_centr_ext { display:block; width:100%; margin:0px; padding:0px; } } |
.div_centr_ext poate avea, ca lăţime width:max-content; dacă se doreşte ajustarea contextuală; s-ar putea, totuşi să fie inserată şi o proprietate min-width.
Dacă ne interesează doar alinierea centrată pe verticală, se poate avea în vedere, la .div_centr_int, în loc de:
|
1 2 3 |
left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); |
să folosim:
|
1 2 3 |
top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); |
|
1 2 3 4 5 6 |
<div class="div_centr_ext"> <h2>Test</h2> <div class="div_centr_int"> I am vertically and horizontally centered. </div> </div> |
