Diskuze: Vertikální a horizontální center
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Člen

Zobrazeno 9 zpráv z 9.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Mám jednoduché řešení, které však funguje pouze v CSS3.
(mám to napsané v SASSu)
@mixin vendor-prefix($name, $value){
-webkit-#{$name}: #{$value};
-moz-#{$name}: #{$value};
-ms-#{$name}: #{$value};
-o-#{$name}: #{$value};
#{$name}: #{$value};
}
@mixin vertical-center($value: 50%){
position: relative;
top: $value;
@include vendor-prefix(transform, translateY(-50%));
}
@mixin horizontal-center($value: 50%){
position: relative;
left: $value;
@include vendor-prefix(transform, translateX(-50%));
}
Ja to riešim pomocou margin: 0 auto; pre horizontálne centrovanie a:
// vertikalne centrovanie
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById("home");
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
pre vertikálne kde za "home" dosadis element ktory len chces
Jinak se to dá udělat také IMHO tak, že 1 element nastavíš na left: 50% a elementům vevnitř tohoto nastavíš nějaký float + right: 50%...
tedy nějak :
.VNEJSI
{
position: relative;
display: inline-block;
left: 50%
}
.VNITRNI
{
position: relative;
float: left;
right: 50%;
}
Avšak nevím, jestli to bude fungovat na 100%. To pak někdy musím
prozkoušet, ale mělo by to fungovat všude...
To je špatné řešení, do toho by jsi vůbec JS tahat neměl.
Ja som to mal takú malú pomôcku pokiaľ som nepoužíval Sass, kde sa to samozrejme dá viacerými spôsobmi a lepšie
Tak ono se to moje řešení (1) - to ti vycentruje cokoli v čemkoli (jen
CSS3) - dá přepsat do čistého CSS, to není žádný problém.
Dá ale v čistom CSS je to také pre mňa dosť škaredé. Neviem prečo sa mi to nepáči.
Zdravím,
nemohu rozchodit tu ukázku v SASS(o SASS slyším poprvé) ale jakse zdá,
druhá ukázka mi něják také nefunguje.
http://s23.postimg.org/…rizontal.png
http://pastebin.com/B7undewS
Nevím jestli jsem se vyjádřil správně ale chtěl bych docílit
vertikální i horizontální zarovnání, které by vypadalo asi takto:
http://s30.postimg.org/…rizontal.png
http://pastebin.com/dw0SBSLm
Zobrazeno 9 zpráv z 9.