-
-
Save dradzys/c0bf474a60edc0bb4eca970b96db2c85 to your computer and use it in GitHub Desktop.
Nurodo main bloka pozicija absoliucia
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| Nurodo main bloka pozicija absoliucia | |
| top left kampa pastumia i centra | |
| tada su neigiamais margin pastumia elemento centra taip | |
| kad sutaptu su viewport centru | |
| Minusai: toks pvz, naudoja statinius matmenys, tai yra viska | |
| reikia pasiskaiciuoti konkreciam atveju. | |
| Tikslas naudoti procentus vietoj statiniu dimensiju | |
| */ | |
| /** transform leidzia transformuoti elementa, tiek jo masteli | |
| tiek pasukimo kampa ir pns | |
| translate pajudina elementa i nurodyta pozicija, top ir left | |
| antras sprendimo budas truputi geresnis taciau, jis irgi | |
| turi problemu. Jeigu norimas elementas aukstesnis uz viewporta | |
| tada perteklius nukerpamas. Taip pat absoliucios pozicijos | |
| naudojimas nera idealus, nes jis veikia visa maketa, isdestyma | |
| */ | |
| main { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-top: -3em; /* 6/2 = 3 */ | |
| margin-left: -9em; /* 18/2 = 9 */ | |
| width: 18em; | |
| height: 6em | |
| /*transform: translate(-50%, -50%); | |
| */ | |
| padding: 1em 1.5em; | |
| box-sizing: border-box; | |
| background: #655; | |
| color: white; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin: 0 0 .2em; | |
| font-size: 150%; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| body { | |
| background: #fb3; | |
| font: 100%/1.5 sans-serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <h1>Am I centered yet?</h1> | |
| <p>Center me, please!</p> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment