html - mostrar - Cómo tener imágenes en línea con el texto en css

insertar imagen html url

Question

Estoy creando el pie de página de mi sitio web usando html y css.

Quiero que las dos imágenes de Facebook y Twitter estén en línea con el texto para que todo en el pie de página esté en línea con los demás

Por el momento, mi código de pie de página es

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--> 

¿Alguien puede ayudar, por favor?

Answer 1

Encuentro una gran cantidad de tiempo que necesito para ajustar la posición de la imagen para alinearla con el texto. Puede hacer esto envolviendo el texto y la imagen en un div con una posición relativa y luego asignando la posición absoluta en la imagen. Luego puede agregar la parte superior y el margen izquierdo para ajustar la posición relativa al texto. 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;
}

Answer 2

La forma más simple es usar <span> lugar de <p> . <p> crea un nuevo párrafo que deja de ser "independiente".

Answer 3

Si desea utilizar nuevas etiquetas específicas para el pie de página y la dirección, este es mi ejemplo :

<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 }

Se agregó el alt a las imágenes para ayudar con la discapacidad y los estándares.

Answer 4

Vea este ejemplo de trabajo aquí .

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

Answer 5

<p> etiquetas son elementos de nivel de bloque. Use un elemento en línea como <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>

Alternativamente, si puede usar CSS, puede definir ambos elementos como inline-block :

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

Ejemplo 1 jsFiddle

Ejemplo 2 jsFiddle

EDITAR: También puede ser conveniente para la semántica usar <address> , en lugar de <span> . Por ejemplo:

<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>

Como <address> también es un elemento de nivel de bloque, deberá incluir el CSS correcto de la siguiente manera:

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

Ejemplo final jsFiddle

Answer 6

.content img, .content p { float:left } float: left / right - dependiendo de donde quieras que esté