How to have images in line with text in css

css, footer, html, image, text

Solution

`<p>` tags are block-level elements. Use an inline element such as `<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>

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 `<address>`, rather than `<span>`. For example:

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

Since `<address>` 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

Problem

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 is in line with eachother At the moment my footer code is 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--> ``` Can anyone help please?

Original source