Työkaveri vihjasi törkeän mainion sivun, jossa kerrotaan miten UI-elementin voi keskittää vertikaalisesti kolmella koodirivillä. Taikasana on CSS.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Saman voi kirjoittaa myös mixininä.
/* Mixin */
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@include vertical-align();
}
Elementti voi sijoittua pikseleiden väliin, jolloin elementin reunat voivat näyttää sumuisilta tai pehmeiltä. Määrittelemällä keskittämisen parin lisämääreen avulla ongelma ratkeaa.
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Korjauksen voi tehdä myös perspectiven
avulla (ratkaisua ehdotti alkuperäisessä postissa roydukkey):
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Nauti keskittämisestä!