Prikazi cijelu temu 17.04.2020 10:48
mirsadz Van mreze
Administrator
Registrovan od:26.05.2011
Lokacija:BiH


Predmet:Re: Responsive web stranica
Da bi ti forma dosla u sredinu, potrebno je dodati jos jednu klasu. Ja sam je nazvao "centar".

PreuzmiIzvorni kôd (CSS):
  1. .centar{
  2.         margin: 0;
  3.         position: absolute;
  4.         top: 50%;
  5.         left: 50%;
  6.         -ms-transform: translate(-50%, -50%);
  7.         transform: translate(-50%, -50%);
  8.   }

Nakon toga moras promijeniti u klasi ".header" njegovu Å¡irinu "width" na 100%, također i kod "form, .content" width na 100%, da ne bi doÅ¡lo do sužavanja forme. Te izmjene bi trebale izgledati ovako:

PreuzmiIzvorni kôd (CSS):
  1. .header {
  2.         width: 100%;
  3.         margin: 60px auto 0px;
  4.         color: white;
  5.         background: #5F9EA0;
  6.         text-align: center;
  7.         border: 1px solid #B0C4DE;
  8.         border-bottom: none;
  9.         border-radius: 10px 10px 0px 0px;
  10.         padding: 20px;
  11. }
  12. form, .content {
  13.        
  14.         width: 100%;
  15.         margin: 0px auto;
  16.         padding: 20px;
  17.         border: 1px solid #B0C4DE;
  18.         background: white;
  19.         border-radius: 0px 0px 10px 10px;
  20. }
  21.  
  22. .centar{
  23.         margin: 0;
  24.         position: absolute;
  25.         top: 50%;
  26.         left: 50%;
  27.         -ms-transform: translate(-50%, -50%);
  28.         transform: translate(-50%, -50%);
  29.   }

Ovo bi trebalo biti dovoljno da tvoja forma bude tacno u sredini... (u odnosu na vertikalu i horizontalu)

https://imgur.com/CKf97kz