CODEWITHSUNDEEP
htmlcssimageicons
ThinkDevDM
ThinkDevDM

Reputation: 1

Auto Adjusting the Size of Images and/or Icons On the Same Line

Imagine social media icons/images (e.g. Facebook, Twitter, LinkedIn) lined up next to each other on the same line. How can I make the size of the icons/images auto adjust when I add additional icons/images to that line? Right now they just jump to the next line. I want it to where, if I add icons/images, they get smaller, so as to stay on the same line; if I take icons/images away, they get larger to fit the width of the container.

Thank you for your help!

Update:

            <div class="padding"><a href="http://www.facebook.com"><img class="image" src="images/black_white_facebook.png" alt="Facebook Icon" /></a></div>
            <div class="padding"><a href="http://www.twitter.com"><img class="image" src="images/black_white_twitter.png" alt="Twitter Icon" /></a></div>
            <div class="padding"><a href="http://www.linkedin.com"><img class="image" src="images/black_white_linkedin.png" alt="Linked In Icon" /></a></div>
            <div class="padding"><a href="http://www.wordpress.com"><img class="image" src="images/black_white_wordpress.png" alt="WordPress Icon" /></a></div>
            <div class="padding"><a href="http://www.youtube.com"><img class="image" src="images/black_white_youtube.png" alt="YouTube Icon" /></a></div>
            <div class="padding"><a href="http://www.plus.google.com"><img class="image" src="images/black_white_google_plus.png" alt="Google+ Icon" /></a></div>

        </div><!-- end of icons div -->

icons {margin: 0 auto; text-align: center;}

.image {width: 150px; background-color: white; padding: 2px;}

.padding {display: inline; padding-right: 6px;}

Upvotes: 0

Views: 338

Answers (1)

Neo
Neo

Reputation: 1469

I think you should put each content: text, icon in different and put these in a line with width and height as you want

Upvotes: 0

Related Questions