Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
devweb:css [14-05-2015 23:56] edmc73 |
devweb:css [16-11-2023 22:13] edmc73 [Aligner / centrer horizontalement] |
||
---|---|---|---|
Ligne 8: | Ligne 8: | ||
* A:hover + B (si B est frère directement suivant de A) | * A:hover + B (si B est frère directement suivant de A) | ||
* A:hover ~ B (si B est un frère suivant de A) | * A:hover ~ B (si B est un frère suivant de A) | ||
+ | |||
+ | ===== Unités ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | Pratique, si on veux une div de la hauteur de la fenetre visible moins 10 pixels | ||
+ | <code css> | ||
+ | height: calc(100vh - 10px); | ||
+ | </ | ||
===== Aligner / centrer verticalement ===== | ===== Aligner / centrer verticalement ===== | ||
Ligne 30: | Ligne 39: | ||
Soit tout simplement avec '' | Soit tout simplement avec '' | ||
- | Sinon il faut ruser | + | Sinon il faut ruser si on connait la largeur |
<code css> | <code css> | ||
div{ | div{ | ||
Ligne 36: | Ligne 45: | ||
margin-left: | margin-left: | ||
left: 50%; | left: 50%; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Sinon | ||
+ | <code css> | ||
+ | .parent{ | ||
+ | position: relative; | ||
+ | } | ||
+ | .child{ | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, | ||
} | } | ||
</ | </ |