'How to have images in line with text in css

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?

htmlcssimagetextfooter


Solution 1:[1]

The simplest way is to use <span> instead of <p>. <p> makes a new paragraph which is quit "independent".

Solution 2:[2]

Check out this working example here.

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

Solution 3:[3]

.content img, .content p { float:left } float: left/right - depending where you want it to be

Solution 4:[4]

If you want to use new tags specific for footer and address this is my example:

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

The alt to images was added to help with disability and standards.

Solution 5:[5]

I find a lot of the time I need to adjust the position of the image to align with the text. You can do this by wrapping the text and image in a div with position relative and then assigning position absolute on the image. Then you ca add top and margin left to adjust the position relative to the text. 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;
}

Solution 6:[6]

Use display:inline-block css property for image ad text to display image and text in same line

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 greko
Solution 2 xec
Solution 3 Aleksandr Golubovskij
Solution 4
Solution 5 Stephen Ainsworth
Solution 6 Zia Khan

Related Questions