Menu
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?
428
Entire trick is to use float: left; CSS property on the img element and all the text will automatically wrap around that image. So if you want to align text and image in the same line in HTML like this... In short that is it.
CSS Code: The CSS property is used to set the image as background in the text. The background-image property is used to set an image as background. The -webkit-text-fill-color property is used to give the text a transparent color, the background image will show through the text, thus completing the clipping effect.
Here, we create one main div and inside this another div. after this we create a row and we divide the row in two parts with width attribute. After this we specify dimensions to both image and text with float left to align them side by side. This is the basic model to align images and text side by side.
To add images to a page, we use the <img> inline element. The <img> element is a self-containing, or empty, element, which means that it doesn't wrap any other content and it exists as a single tag. For the <img> element to work, a src attribute and value must be included to specify the source of the image.
The simplest way is to use <span> instead of <p>. <p> makes a new paragraph which is quit "independent".
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
