web-dev-qa-db-fra.com

Comment avoir des images en ligne avec le texte en css

Je crée le pied de page de mon site Web en utilisant HTML et CSS.

Je veux que les deux images de Facebook et Twitter soient alignées avec le texte afin que tout dans le pied de page soit aligné l'un avec l'autre

Pour le moment, mon code de bas de page est

HTML -

<div class="footer content">

        <img src="Images/facebook.png">
        <img src="Images/Twitter.png">

        <p> Address line 1
                        Address line 2
                        Address line 3

  </p>

</div> <!--end of footer-->

Quelqu'un peut-il aider s'il vous plaît?

htmlcssimagetextfooter
10
user3046451

Les balises <p> sont des éléments de niveau bloc. Utilisez un élément en ligne tel que <span>:

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/Twitter.png">
    <span> 
        Address line 1
        Address line 2
        Address line 3
    </span>
</div>

Si vous pouvez utiliser CSS, vous pouvez également définir les deux éléments en tant que inline-block:

.footer.content > img,
.footer.content > p {
    display: inline-block;
}

Exemple 1 jsFiddle

Exemple 2 jsFiddle

EDIT: Il pourrait également être judicieux que la sémantique utilise <address> plutôt que <span>. Par exemple:

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/Twitter.png">
    <address> 
        Address line 1
        Address line 2
        Address line 3
    </address>
</div>

Étant donné que <address> est également un élément de niveau bloc, vous devez inclure le code CSS correct comme suit:

.footer.content > img,
.footer.content > address {
    display: inline-block;
}

Final jsFiddle exemple

11
BenM

Découvrez cet exemple de travail ici .

.channels li {
    float: left;
    margin-left: 0.625em;
}
0
Bala Varadarajan

Si vous souhaitez utiliser de nouvelles balises spécifiques au pied de page et à l’adresse, c’est mon exemple :

<footer id="footer">

    <span><img src="Images/facebook.png" alt="some text" /></span>
        <span> <img src="Images/Twitter.png" alt="some text"/></span>
                <span>
                    <address>
                        Address line 1
                        Address line 2
                    Address line 3
                    </address>    
            </span>
</footer>


#footer {display:inline;}
#footer address {display:inline }

Le alt to images a été ajouté pour aider avec le handicap et les normes.

0
Juan

.content img, .content p { float:left } float: left/right - en fonction de l'endroit où vous souhaitez le placer

0
Aleksandr Golubovskij

Je trouve souvent le temps nécessaire pour ajuster la position de l'image pour l'aligner sur le texte. Vous pouvez le faire en encapsulant le texte et l'image dans un div avec une position relative, puis en attribuant une position absolue à l'image. Ensuite, vous pouvez ajouter le haut et la marge de gauche pour ajuster la position par rapport au texte. https://jsfiddle.net/edhescqn/3/

HTML:

<div class="amazonLink">
    <a href="#">
        <div class="amazonLink__text">Buy Now on Amazon</div>
        <img class="amazonLink__image" 
            src="http://cdn2.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-Amazon-1.png" width="24px" height="24px">
    </a>
</div>

CSS:

.amazonLink {
  position: relative;
  margin-top: 10px;
}

.amazonLink__text {
  display: inline-block;
  line-height: 40px;
}

.amazonLink__image {
  display: inline-block;
  position: absolute;
  top: 8px;
  margin-left: 5px;
}
0
Stephen Ainsworth

Le moyen le plus simple consiste à utiliser <span> au lieu de <p>. <p> crée un nouveau paragraphe qui est quitté "indépendant".

0
greko