Récemment, j'ai rencontré plusieurs de ces problèmes à la fois : 1. Centrer l'image au centre de la page et la compresser lors du redimensionnement du navigateur. En principe, la première et la deuxième tâches peuvent être résolues en utilisant un petit javascript, mais je voulais le faire judicieusement en utilisant html+css.
La tâche a également été facilitée par le fait que le site sur lequel cela serait utilisé était développé comme un site moderne et que le support était limité à ie9+, FF, Chrome, Safari, Opera. 2. Centrage absolu de l'image, quelle que soit la taille de la fenêtre du navigateur. Mais j'ai dû bricoler ça. L'idée de départ était la suivante :
.wrapper( débordement : caché ; position : fixe ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; ) .item( position : absolue ; haut : 50 % ; gauche : 50 % ; affichage : bloc en ligne ; ) .item img( marge : -50% 0 0 -50%; )
L’idée reposait sur la logique suivante :
- Un bloc extérieur, .wrapper, étiré sur toute la largeur et la hauteur libres.
- Le bloc interne, .item, prend la largeur et la hauteur de l'image qui se trouve à l'intérieur, puisqu'il s'agit d'un bloc en ligne ; et est placé avec le coin supérieur gauche au centre du bloc parent.
- Placer l'image dans une marge négative, ce qui aurait dû l'aligner exactement au centre du .wrapper
J'ai décidé cela en me souvenant de transform, ou plus précisément de sa fonction de traduction, qui semble déplacer l'affichage d'un objet, mais laisse l'endroit où il se trouvait. Et il s'est avéré qu'en remplaçant la marge de l'image par transform: translation(-50%, -50%); le problème est résolu immédiatement. Et voici ce qui ressort à la fin :
*( remplissage : 0 ; marge : 0 ; alignement vertical : haut ; ) html, corps ( largeur : 100 % ; hauteur : 100 % ; ) .wrapper ( débordement : caché ; position : fixe ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; ) .item( position : absolue ; haut : 50 % ; gauche : 50 % ; affichage : bloc en ligne ; ) .item img( -webkit-transform : traduire (-50 %, - 50 % ); -moz-transform : traduire (-50 %, -50 %); transformer : traduire (-50 %, -50 %); )
PS : je ne sais pas si ce sont les seules options ou non. Je ne pense pas que ces options conviennent à tout le monde.
Mais je sais avec certitude que s'ils convenaient à mon cas, il y aurait alors des personnes qui leur seraient probablement très utiles dans leurs tâches. De plus, si vous ajoutez un peu de code au code, vous pouvez ajouter des béquilles pour les anciens IE, je ne l'ai pas ajouté parce que je ne voulais pas le faire pour le bien de navigateurs obsolètes gâcher le code propre.
PS2 : Les critiques et les conseils sont les bienvenus. Merci d'avoir lu jusqu'au bout.
Tags : html, css, css3, image, image, image, alignement, alignement vertical
Utiliser CSS est le plus de la meilleure façon possible centrer des images, des blocs de texte et même des conceptions de pages Web entières. La plupart des propriétés d'alignement HTML sont disponibles en CSS depuis la version 1.0. Ils fonctionnent très bien avec CSS3 et les navigateurs Web modernes :
Utiliser CSS pour le centrage en HTMLCentrage avec en utilisant CSS peut être un défi pour les nouveaux concepteurs de sites Web. Il existe de nombreuses façons de procéder, mais toutes ne s’appliquent pas à tous les éléments.
CSS peut être utilisé pour :
- Centrer le texte ;
- Centrer un élément de bloc (comme un div) ;
- Centrez l'image ;
- Centrez verticalement un bloc ou une image.
Il y a des années, les concepteurs de sites Web pouvaient l'utiliser pour centrer des images et du texte. Mais cette balise est désormais obsolète et n’est plus prise en charge. navigateurs modernes. Cela est dû au fait que les sites Web modernes doivent avoir une séparation claire entre la structure et les styles.
HTML est utilisé pour créer la structure et CSS définit les styles. Le centrage étant une caractéristique visuelle, il est réalisé à l’aide de styles en cascade.
Centrer le texte avec CSSLe moyen le plus simple consiste à centrer le texte sur une page Web. Pour ce faire, vous n'avez besoin que d'une seule propriété : HTML text align :
p.center (text-align: center;)
Avec cette ligne de code, chaque paragraphe avec la classe center sera centré horizontalement au sein de son élément parent.
Applications de cette classe :
Ce texte est centré.
Lorsque vous centrez du texte à l'aide de la propriété text-align, n'oubliez pas qu'il sera centré dans le conteneur qui le contient, et pas nécessairement par rapport à la page entière.
Centrage des blocs de contenu à l'aide de CSSLes blocs sont des éléments d'une page définis comme éléments de niveau bloc et ayant une largeur spécifique. Ces blocs sont souvent créés à l'aide de .
La manière la plus courante de centrer les cases consiste à définir le remplissage gauche et droit sur auto :
div.center ( marge : 0 auto ; largeur : 80em ; )
Cette forme abrégée de la propriété margin définira les marges supérieure et inférieure sur 0 , et les marges gauche et droite utiliseront auto . De cette façon, tout l'espace disponible est occupé et réparti équitablement entre les deux côtés, ce qui équivaut à Divin HTML aligner.
Application en HTML :
Ce bloc entier est centré, mais le texte à l’intérieur est aligné à gauche.
Le bloc ayant une largeur spécifique, il sera centré dans l’élément qui le contient. Le texte de ce bloc ne sera pas aligné au centre, mais à gauche. Car par défaut dans les navigateurs, le texte est aligné à gauche. Pour que le texte soit également centré, utilisez la propriété text-align que nous avons décrite précédemment.
Centrage des images à l'aide de CSSLa plupart des navigateurs afficheront les images centrées lors de l'utilisation Propriétés HTML aligner le texte. Mais vous ne devez pas vous fier à cette méthode, car elle n’est pas recommandée par le W3C.
Au lieu de cela, vous devez indiquer explicitement au navigateur que l'image est un élément de niveau bloc. Voici le code CSS pour cela :
img.center ( affichage : bloc ; marge gauche : auto ; marge droite : auto ; )
Voici le code HTML de l'image à centrer :
Il est également possible de centrer des objets à l'aide de CSS en ligne :
Centrage vertical des éléments à l'aide de CSSL'alignement vertical HTML a toujours été problématique dans la conception Web, mais avec la publication de la spécification CSS Flexible Box Layout Module dans CSS3, il existe une solution à ce problème.
L'alignement vertical fonctionne de la même manière que l'alignement horizontal décrit ci-dessus. La propriété vertical-align avec la valeur middle :
Vcenter (alignement vertical : milieu ; )
L'inconvénient de cette approche est que tous les navigateurs ne prennent pas en charge CSS FlexBox. En cas de problèmes avec les versions antérieures des navigateurs, le W3C recommande de centrer le texte verticalement dans un conteneur en utilisant la méthode suivante :
- Placez les éléments que vous souhaitez centrer à l'intérieur d'un élément conteneur, tel qu'un div ;
- Définissez une hauteur minimale pour l'élément conteneur ;
- Déclarez un élément conteneur ;
- Définissez l'alignement vertical HTML au milieu.
Par exemple:
Vcenter ( hauteur min : 12 em ; affichage : cellule de tableau ; alignement vertical : milieu ; )
Code HTML:
Ce texte est centré verticalement dans la case.
Centrage vertical et début Versions Internet ExplorateurIl existe plusieurs façons d'amener IE à centrer les objets, puis à utiliser commentaires conditionnels. La bonne nouvelle est qu'en raison des récentes Solution Microsoft Supprimez la prise en charge des anciennes versions d'IE. Ces navigateurs sont sur le point de disparaître bientôt, ce qui permettra aux concepteurs Web d'utiliser plus facilement des approches de balisage modernes telles que CSS FlexBox.
La traduction de l'article « Utiliser CSS pour centrer les images et autres objets HTML » a été préparée par l'équipe sympathique du projet.
Bon mauvais
Valera 11 octobre 2013 à 17h17 Centrer les images sur la page- CSS
- HTML
Récemment, j'ai rencontré plusieurs de ces problèmes à la fois : 1. Centrer l'image au centre de la page et la compresser lors du redimensionnement du navigateur. En principe, la première et la deuxième tâches peuvent être résolues en utilisant un petit javascript, mais je voulais le faire judicieusement en utilisant html+css.
La tâche a également été facilitée par le fait que le site sur lequel cela serait utilisé était développé comme un site moderne et que le support était limité à ie9+, FF, Chrome, Safari, Opera. 2. Centrage absolu de l'image, quelle que soit la taille de la fenêtre du navigateur. Mais j'ai dû bricoler ça. L'idée de départ était la suivante :
.wrapper( débordement : caché ; position : fixe ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; ) .item( position : absolue ; haut : 50 % ; gauche : 50 % ; affichage : bloc en ligne ; ) .item img( marge : -50% 0 0 -50%; )
L’idée reposait sur la logique suivante :
- Un bloc extérieur, .wrapper, étiré sur toute la largeur et la hauteur libres.
- Le bloc interne, .item, prend la largeur et la hauteur de l'image qui se trouve à l'intérieur, puisqu'il s'agit d'un bloc en ligne ; et est placé avec le coin supérieur gauche au centre du bloc parent.
- Placer l'image dans une marge négative, ce qui aurait dû l'aligner exactement au centre du .wrapper
J'ai décidé cela en me souvenant de transform, ou plus précisément de sa fonction de traduction, qui semble déplacer l'affichage d'un objet, mais laisse l'endroit où il se trouvait. Et il s'est avéré qu'en remplaçant la marge de l'image par transform: translation(-50%, -50%); le problème est résolu immédiatement. Et voici ce qui ressort à la fin :
*( remplissage : 0 ; marge : 0 ; alignement vertical : haut ; ) html, corps ( largeur : 100 % ; hauteur : 100 % ; ) .wrapper ( débordement : caché ; position : fixe ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; ) .item( position : absolue ; haut : 50 % ; gauche : 50 % ; affichage : bloc en ligne ; ) .item img( -webkit-transform : traduire (-50 %, - 50 % ); -moz-transform : traduire (-50 %, -50 %); transformer : traduire (-50 %, -50 %); )
PS : je ne sais pas si ce sont les seules options ou non. Je ne pense pas que ces options conviennent à tout le monde.
Mais je sais avec certitude que s'ils convenaient à mon cas, il y aurait alors des personnes qui leur seraient probablement très utiles dans leurs tâches. De plus, si vous ajoutez un peu au code, vous pouvez ajouter des béquilles pour les anciens IE, je ne l'ai pas ajouté car je ne voulais pas gâcher le code propre au profit de navigateurs très obsolètes.
PS2 : Les critiques et les conseils sont les bienvenus. Merci d'avoir lu jusqu'au bout.
Tags : html, css, css3, image, image, image, alignement, alignement vertical
Ce qui vous permet d'aligner automatiquement n'importe quel objet/calque au centre de l'image ou sur ses bords avec une précision de cent pour cent. Vous pouvez également aligner par rapport à une zone spécifique de l'image. Tout cela est très simple et sera discuté dans cet article.
En règle générale, les débutants effectuent cette opération à l'oeil nu, ce qui n'est pas du tout nécessaire. Sélectionnez un outil En mouvement et faites-y attention. Il existe un certain nombre de paramètres responsables de cette tâche ( regarde la capture d'écran):
Les trois premiers boutons sont responsables de l'alignement vertical (de gauche à droite) : bord supérieur, centre, bord inférieur.
Les trois boutons suivants sont responsables de l'alignement horizontal (de gauche à droite) : gauche, centre, droite.
Ainsi, pour placer un objet exactement au centre, vous devez sélectionner un centrage vertical et horizontal.
La règle d'alignement la plus importante : tout d'abord, vous devez indiquer à Photoshop la zone par rapport à laquelle le programme doit rechercher les bords ou le milieu. Jusqu'à ce que vous fassiez cela, les boutons d'alignement seront inactifs, ce qui signifie qu'il ne sera pas possible de cliquer sur eux.
C'est le secret pour créer un objet au milieu de l'image entière ou de son fragment séparé.
Ainsi, la séquence d'actions est la suivante :
Disons que vous devez centrer cette image :
Étape 1
Nous indiquons à Photoshop la zone par rapport à laquelle le programme doit aligner l'image. Cela se fait en créant un .
Sélectionnez dans la palette des calques couche d'arrière-plan et appuyez sur la combinaison de touches Ctrl+A ( Tout sélectionner). En conséquence, vous devriez voir un cadre de sélection de "fourmis en marche" autour du calque d’arrière-plan. (En règle générale, le calque d'arrière-plan a la même taille que le canevas).
Note
Vous pouvez sélectionner le calque d'arrière-plan d'une autre manière - maintenez la touche enfoncée Touche Ctrl et faites un clic gauche sur le calque d'arrière-plan. La méthode fonctionne lorsque ce calque est déverrouillé (ceci est indiqué par l'icône en forme de cadenas).
Étape 2
Vous devez maintenant sélectionner un outil En mouvement. Lorsque nous aurons un cadre de sélection, les boutons d’alignement deviendront actifs, ce qui signifie qu’ils pourront être utilisés.
Sélectionnez le calque avec l'image que vous souhaitez aligner, et cliquez maintenant sur les boutons en fonction de l'endroit où vous souhaitez placer cette image. Par exemple, plaçons-le exactement au centre. Ensuite, nous devons cliquer sur ces boutons :
Un autre exemple. Disons que vous devez placer l'image au centre, mais sur le bord gauche. Ensuite, dans la barre d'options, sélectionnez les boutons suivants :
Disons qu'il y a un fragment dans l'image, à l'intérieur duquel vous devez placer une image parfaitement uniformément. Dans mon exemple, j'ai ajouté un carré de verre. Qu'il y ait une autre image à l'intérieur ( À propos, vous pouvez apprendre vous-même à fabriquer vous-même un tel carré de verre).
Étape 1
Tout d'abord, par analogie avec la première option, vous devez sélectionner ce fragment. Comment faire cela ?
— Si ce fragment se trouve sur un calque séparé (comme mon carré, que j'ai inséré séparément), alors vous devez cliquer Ctrl et cliquez sur la vignette du calque si elle n'est pas verrouillée).
— Si ce fragment est dans l'image elle-même, alors vous devez sélectionner les outils de sélection Zones rectangulaires et ovales et utilisez-les pour dessiner une zone lisse et sélectionnée autour du fragment. Comment utiliser ces outils. En mouvement et, en maintenant la touche Maj enfoncée, cliquez sur les flèches directionnelles du clavier. L'image se déplacera par incréments de 10 pixels.
Si vous ne maintenez pas cette touche enfoncée, mais utilisez simplement les flèches du clavier, l'image se déplacera par incréments de 1 pixel.
Si vous remarquez une erreur dans le texte, sélectionnez-la et appuyez sur Ctrl + Entrée. Merci!
TâcheAlignez la photo et la légende horizontalement sur la page Web.
SolutionLes illustrations accompagnant le texte sont souvent centrées sur la page Web, le texte apparaissant avant et après l'image. Cet agencement d'éléments vous permet de diviser un texte volumineux en blocs significatifs et d'attirer l'attention sur les images.
Voyons d’abord comment aligner l’image au centre. Pour ce faire, ajoutez une propriété de style d'alignement du texte avec le centre de valeurs au sélecteur P. Dans ce cas, la balise doit être situé à l'intérieur d'un paragraphe (balise
). Pour éviter que tous les paragraphes de la page ne soient alignés au centre, introduisons notre classe fig et effectuons toutes les actions avec elle. L'exemple 1 montre comment procéder.
Exemple 1 : Utilisation de l'alignement du texte
HTML5 CSS 2.1 IE Cr Op Sa Fx
Aligner la photo au centre .fig ( text-align: center; /* Aligner au centre */ )
Texte avant l'image
Texte après image
Résultat cet exemple montré sur la fig. 1.
Riz. 1. Image centrée sur la page Web
Vous pouvez également ajouter une légende à la photo. Le texte doit être placé immédiatement après l’image et centré de la même manière. Tout est simple ici, réutilisons notre classe, mais appliquons-la à la balise. Pour que l'apparence du texte de la signature soit différente des paragraphes normaux, mettez-le en italique et surlignez-le dans une couleur différente (exemple 2).
Exemple 2. Légende de l'image
HTML5 CSS 2.1 IE Cr Op Sa Fx
Photo avec légende .fig ( affichage : bloc ; /* Élément de bloc(pour les anciens navigateurs) */ text-align: center; /* Alignement au centre */ font-style: italic; /* Style italique */ margin-top: 0; /* Marge supérieure */ margin-bottom: 5px; /* Rembourrage inférieur */ couleur : #666 ; /* Couleur de la légende de la figure */ ) document.createElement("figure"); document.createElement("figcaption"); 
L'homme des cavernes fait du feu. Mais quelle est cette surface lunaire en arrière-plan ? Non, ce n'est pas si simple.
Le résultat de cet exemple est présenté sur la Fig. 2.
Riz. 2. Signature sous la photo
Pour un bloc avec une photo, le tag est utilisé, et pour sa légende, le tag est utilisé. Les anciennes versions d'IE ne comprennent pas ces balises, c'est pourquoi un petit script est ajouté spécifiquement pour elles.