J'ai une image placée dans un widget sur mon blog WordPress. Je veux que l'image soit centrée puisqu'elle est plus petite que la barre latérale, elle est placée dans.
I Utilisez actuellement le code suivant: mais l'image s'aligne à gauche. < / p> Qu'est-ce que je fais mal? Merci beaucoup!
5 Réponses :
Essayez Marge: 0 auto au lieu de les déclarer séparément. Vous pouvez également essayer d'ajouter text-align: centre à son conteneur ou parent parent
Je vais vous donner deux solutions
Vous devez donner la largeur de balise DIV parent: selon les besoins, c'est-à-dire 75% à 100%.
Écrivez CSS pour la balise IMG: Ajouter ci-dessous CSS pour Image bonne chance Marge-GAUCHE: 250PX ou PLUS.
Position Relative; marge-gauche: 250px ou plus;
Utiliser p> Text-Align: Centre; Code> sur votre DIV qui contient l'image:
.siteorigin-widget-tinymce.textwidget{
text-align: center;
}
Parce que tout le monde a ajouté les réponses en utilisant quelque chose de similaire. J'ai décidé de partager cela avec tout le monde. Vous pouvez utiliser cette solution pour une image au centre pour les deux voici le Démo de l'approche ci-dessus. Si vous voulez centrer uniquement horizontalement en utilisant avis j'ai changé Il y a des choses à garder à l'esprit avec le travail avec Flexbox. Si vous voulez compter sur flexbox, il est à nouveau trop difficile. Les images sont Cependant, il ne créera pas le Vous pouvez également utiliser x (horizontal) et y (vertical) axe flexbox < / strong> . en utilisant
flexbox
flexbox juste omettre les styles pour img et définissez ce qui suit.
flex-direction propriété à partir de colonne à ligne qui est défaut. Si vous ne le spécifiez pas, cela fonctionnera toujours. Réglage de la colonne le fera du centre verticalement.
#imgbox Dans ce cas doit avoir une hauteur et une largeur, sinon l'image ne se concentrera pas dans l'un des axes. Ceci est également requis pour la marge: 0 Auto pour fonctionner, c'est-à-dire sans une largeur (pas en pourcentage), la marge: 0 auto La propriété ne fonctionnera pas dans CSS .
Approche alternative:
en ligne dans la nature sur les pages Web, mais elles peuvent toujours avoir largeur et hauteur afin qu'ils puissent être centrés horizontalement en utilisant text-alignement Propriété Ie à l'aide de l'exemple ci-dessus ... img verticalement. vertical-align seul ne centrifiera pas l'image verticalement dans ce cas. Pour cela, vous pouvez Vérifiez ce message ici. c'est gentiment Expliqué là-bas. Affichage: Tableau et Affichage: Table-Cellule ET Postuler Texte-Align: Centre et vertical-align: intermédiaire sur pile de table pour centrer le contenu sur les deux axes, mais je ne les recommandes pas à moins que ce soit vraiment nécessaire.
En supposant que vous avez le CSS spécifique de WP correct dans votre thème enfant, essayez ceci:
<img src="path_to_image_copied_from_media_library" alt="an_alt_label" width="150" height="150" class="aligncenter size-thumbnail" />
C'est probablement quelque chose d'autre qui cause le problème
Y a-t-il un
text-align: gauche ouflotteur: gauche qui pourrait l'affecterJe n'utilise pas WordPress, mais vérifie que l'image n'hérite pas
float: gauche d'une autre règle définie précédemment.Publiez un lien vers la page Web avec le problème que vous rencontrez.
L'exemple de travail (non) de travail serait grandement apprécié comme mentionné Ionut, sur lui-même, le CSS devrait fonctionner, comme démontré le violon de Potashin. Les choses qui pourraient être interférentes sont des styles hérités ou des CSS mondiaux, tous deux sont très faciles à vérifier si nous avons un exemple de travail
Voici l'un des liens où cela ne fonctionne pas, mais c'est fondamentalement la même chose sur toutes les autres pages post-page - TravelersUniverse.com/places-a-visit-in-japan-for-animal-lo vers.
Hé, @laura, j'ai posté une réponse. Est-ce utile?!
@Laura Acceptez / Marquez la réponse correcte qui a résolu votre problème en cliquant sur le symbole droit.