How to have images in line with text in css

Question

I\'m creating the footer of my website using html and css.

I want to have the two facebook and twitter images in line with the text so that everything in the footer

Answer 1

tags are block-level elements. Use an inline element such as :

    
    
     
        Address line 1
        Address line 2
        Address line 3
    

Alternatively, if you're able to use CSS, you can define both elements as inline-block:

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

Example 1 jsFiddle

Example 2 jsFiddle

EDIT: It might also be wise for semantics to use

, rather than . For example:

    
    
    
 
        Address line 1
        Address line 2
        Address line 3
    

Since

is also a block-level element, you'll need to include the correct CSS as follows:

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

Final jsFiddle example