Comment faire pour centrer aligner img enveloppé dans la balise SPAN?

Je suis en train de centre d'aligner une image qui est enveloppé dans un <span>, mais j'ai du mal à le faire. J'ai téléchargé mon CSS et HTML pour jsfiddle: http://jsfiddle.net/7nHhu/1/

Je suis en train d'essayer d'obtenir l'image pour centrer aligner avec le contenu dans un "bloc" de style (ie. tous les textes ci-dessus et ci-dessous, n'est pas enroulé à gauche ou à droite)

Toute aide serait grandement appréciée.

.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}

<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>​
Alors pourquoi ne pas utiliser display: block sur le .imgframe élément? Ou, mieux encore, utilisez un div?

OriginalL'auteur JROB | 2012-07-06

  1. 3

    Juste faire une image wrapper élément de niveau bloc et text-align:center;.

    VIOLON

    ou de l'envelopper dans un autre élément, si nécessaire;

    VIOLON

    OriginalL'auteur Musa

  2. 6

    Je pense qu'il est plus approprié d'utiliser text-align pour le centrage du texte plutôt que des images. Vous pourriez centre d'une image, réglage de la marge de gauche et droite auto.

    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-top: 10px; //margin-top doesn't work
}

    Démo

    OriginalL'auteur Foreever

  3. 0

    .imgframe, ajouter width: 100%;

    ...mais je ne veux pas le cadre de la prise jusqu'à la totalité de la largeur de la page, seulement 8px à l'extérieur du bord de l'image.
    Puis l'entourer d'une div et faire de la largeur à 100% sur la div. Le conteneur doit savoir quelle est la largeur de la page est dans le but de le centrer.

    OriginalL'auteur TheGeekYouNeed

  4. 0

    Compte tenu de vos exigences, afin de garder le .imgframe élément en-ligne, pour éviter de prendre toute la largeur de l'élément englobant, et de travailler sans l'ajout de l'enchaînement des éléments de votre marque, les ouvrages suivants:

    body {
    text-align: center;
}

body p {
    text-align: left;
}

    JS Fiddle démo.

    Ce serait, sans doute, être moins intrusif si vous aviez des éléments à partir de votre Violon enveloppé dans une, cible-mesure, élément; plutôt que de le body, comme la méthode ci-dessus, vous oblige à réinitialiser le text-align pour tous les éléments contenus dans le body. Donc, personnellement, j'utiliserais:

    <div id="contentWrapper">
    <p>...</p>
    <span class="imgframe">
        <img src="..." />
    </span>
    <p>...</p>
</div>

    Et:

    #contentWrapper {
    text-align: center;
}

#contentWrapper p {
    text-align: left;
}

    Simplement dans le but de minimiser la quantité de travail nécessaire pour mettre de l'ordre par la suite.

    OriginalL'auteur David Thomas