Horizontale de l'image aligner CSS
J'ai un peu de mal à l'alignement de l'image principale. Il devrait être aligné au centre horizontalement, mais l'empêche d'aller tous sur la place. La page peut être trouvée ici http://0034.eu/propmanager/
<img src="images/background-space.png" class="displayed" border="0" />
IMG.displayed{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
C'est essentiellement le CSS, j'ai appliqué à l'image, tout le code source est sur le main index.html (pas de feuille de style séparée).
- ajouter le
width
attribut ensuite, il sera - Désolé, mais n'est pas associée avec le domaine de plus, des liens peuvent ne pas fonctionner correctement
Vous devez vous connecter pour publier un commentaire.
Ajouter
display: block;
DÉMO
Ajouter à votre feuille de style CSS.
MODIFIER
Depuis les entrées de IlyaStreltsyn, je suis d'accord avec le point de
clearing
laright
avecdisplay:block
que l'image soit centrée.Par Exemple,
display:table-caption;
?display:block;
comme d'autres l'ont suggéré? Son certainement pas une table-caption..display:block;
n'a pas de travail. J'ai donc essayédisplay:table-caption;
et que travaillé.display:table-caption;
devrait être ou ne devrait pas être utilisé ici? - @Dominicdisplay: block
ne pas aligner l'image ici en raison du droit-flottantp
avecheight: 150px
au-dessus d'elle. Après l'ajout declear: right
, il centre l'image avecmargin: auto
(comme prévu) et supprime le besoin de unsemantic<br>
au-dessus d'elle. Je crois que c'est la meilleure solution que d'utiliser exotiquestable-*
bien pour ses plutôt de la non-intuitive effet secondaire.display:block;
ne fonctionne que si le droit est supprimé. Par exempleimg.displayed { clear: right; display: block; margin-left: auto; margin-right: auto; }
display:table-caption;
à condition qu'il soit de la résolution de l'OP problème? Comme je me suis concentré sur la sortie, mais si il n'y a pas de logique point de l'utilisation de la table de la légende, je serais disposé à revenir, pour autant qu'il est titulaire d'une logique de ne pas l'utiliser.table-*
valeurs d'affichage peuvent causer des problèmes d'accessibilité. Aussi, le rendu de latable-caption
avait quelques incohérences entre les navigateurs à un point. Maintenant, il ne devrait pas être telle propblems, mais je persiste à croire queblock
est beaucoup plus compréhensible et prévisible:)img.displayed { display: block; margin: 0 auto; clear: right; }
display: block;
rend l'image placée comme du texte;margin: 0 auto;
automatique des positions de l'image & enfinclear: right;
supprime tous les objets flottants à partir de la droite... à droite? Je suis pas certain de savoir comment cela place l'image au centre 😛 Merci encore!Inline blocs (comme inlines, quelles sont les images par défaut) participer au formatage en ligne contexte, pas le bloc de mise en forme de contexte. C'est pourquoi ils n'obéissent pas à
margin:auto
(ce qui signifiemargin: 0
pour eux), mais n'obéir à latext-align
de leur ancêtre élément de bloc.vérifier la Violon ici avec les css et le code
width
,height
etborder
via CSS plutôt que dans la ligne?