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

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:

    
        
Buy Now on Amazon
        
    

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