hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


6 astuces CSS pour aligner le contenu verticalement

Parlons de l'alignement vertical en CSS, ou pour être plus précis sur comment cela n'est pas faisable. CSS n'a pas encore fourni un moyen officiel de centrer le contenu verticalement dans son conteneur. C'est un problème qui a probablement frustré les développeurs web partout. Mais pour ne pas avoir peur, dans ce post, nous allons courir par vous quelques trucs qui peuvent vous aider à imiter l'effet .

Ces astuces peuvent toutefois avoir des limites, et vous devrez peut-être utiliser plus d'une astuce pour compléter l'illusion. Si vous connaissez un autre truc, laissez-nous savoir dans les commentaires.

1. Utilisez le positionnement absolu

La première astuce que nous allons voir ici utilise la propriété position . Tu as deux

, l'un est le conteneur, l'autre, l'élément enfant qui contient le contenu.

Nous allons d'abord définir la position de l'élément container sur relative, puis nous positionnons la position de l'élément enfant sur absolute . Cela nous permet de le placer librement à travers le conteneur.

Pour l'aligner verticalement, déplacez la position de l'élément enfant par le haut, de la moitié de la hauteur du conteneur, et tirez-la vers le haut de la moitié de la largeur de l'élément enfant. Voici la sortie:

Cette astuce est parfaite lorsqu'il n'y a qu'un seul élément enfant, sinon la position absolute affectera l'autre élément dans le même conteneur.

2. Utilisez CSS3 Transform

CSS3 Transform a facilité la mise en place de contenu au centre. CSS3 Transform, contrairement à la propriété position, n'affecte pas la position des autres éléments dans le même conteneur.

En supposant que nous avons la même structure HTML que la méthode précédente - un parent, un élément enfant - 50% de haut et l'utilisation de la transformation CSS donne une traduction de -50% . Et voila.

Gardez à l'esprit que CSS3 Transforms ne fonctionnera pas dans Internet Explorer 8 et ci-dessous. Vous pouvez utiliser l'une des autres méthodes ici comme solution de repli.

3. Rembourrage d'utilisation

Nous pouvons également utiliser un padding pour créer une illusion d'alignement vertical. Pour ce faire, réglez simplement le rembourrage supérieur et inférieur, comme suit:

Cette astuce est appropriée lorsque vous ne définissez pas le conteneur dans une largeur fixe, il suffit de définir la largeur à auto .

4. Utilisez la hauteur de ligne

Si vous ne disposez que d'une seule ligne de contenu textuel dans un conteneur, vous pouvez aligner le texte verticalement à l'aide de la propriété line-height . Définissez la valeur de line-height à peu près la même que la hauteur du conteneur, et vous verrez la sortie suivante.

Rappelez-vous que cette astuce ne fonctionne qu'avec une seule ligne de texte. Si le contenu se divise en deux ou plusieurs lignes, l'espace entre chaque ligne serait comme nous l'avons spécifié dans la line-height, ce qui nous donnerait trop d'espace.

5. Utilisez la table CSS

Personnellement, l'utilisation de CSS Table est mon truc préféré pour appliquer l'alignement vertical. Il fonctionne dans les anciens navigateurs comme Internet Explorer 8. Cette méthode est effectuée en définissant l'affichage de l'élément conteneur sur table, tandis que l'élément enfant doit être affiché en tant que table-cell puis utilisez la propriété vertical-align pour centrer le texte verticalement.

6. Utilisez Flexbox

La dernière méthode de centrage vertical consiste à utiliser Flexbox. Flexbox est un nouveau module dans CSS3. Il offre une méthode plus simple pour aligner le contenu. Pour centrer le contenu verticalement dans une boîte flex, il suffit d'ajouter align-items: center; comme suit, et c'est tout.

Gardez à l'esprit que Flexbox certains navigateurs ne prennent en charge que les fonctionnalités partielles du module Flexbox, telles qu'Internet Explorer 10, Safari, 6 et Chrome 27 et versions ultérieures. Par conséquent, similaire à l'astuce avec CSS3 Transform, assurez-vous que l'effet tombe bien dans ces navigateur.

Fonds d'écran Dark à couper le souffle pour votre bureau

Fonds d'écran Dark à couper le souffle pour votre bureau

Quand il s'agit de fonds d'écran, je préfère les fonds d'écran sombres ou noirs car ils ne consomment pas beaucoup de puissance de la batterie et sont également cool à regarder . Bien qu'il y ait beaucoup de fonds d'écran colorés, mais pour moi (et pour les autres fans de couleur noire), les fonds d'écran sombres donnent un effet puissant et dramatique étrange .Ce qui su

(Conseils techniques et de conception)

Les add-ons arrivent à Gmail en 2017

Les add-ons arrivent à Gmail en 2017

Gmail est sur le point d'être beaucoup plus flexible, car Google a annoncé que des «modules complémentaires» seront déployés dans le service de messagerie d'ici la fin de l'année.Actuellement disponible sous la forme d'un aperçu de développeur, Google affirme que ces «modules complémentaires» seront construits dans les scripts d'applications en utilisant un nouveau système de «carte» qui permet aux développeurs de combiner différents composants de l'interface utilisateur. En plus de cela,

(Conseils techniques et de conception)