CODEWITHSUNDEEP
htmlcssimagetextfooter
user3046451
user3046451

Reputation: 167

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?

Upvotes: 14

Views: 101578

Answers (7)

Zia Khan
Zia Khan

Reputation: 425

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

Upvotes: 0

Stephen Ainsworth
Stephen Ainsworth

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

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

Upvotes: 0

BenM
BenM

Reputation: 53198

<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

Upvotes: 19

Juan
Juan

Reputation: 1382

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.

Upvotes: 0

Bala Varadarajan
Bala Varadarajan

Reputation: 514

Check out this working example here.

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

Upvotes: 1

greko
greko

Reputation: 225

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

Upvotes: 1

Aleksandr Golubovskij
Aleksandr Golubovskij

Reputation: 1583

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

Upvotes: 1

Related Questions