How to put img inline with text
Images have display: inline
by default.
You might want to put the image inside the paragraph.<p><img /></p>
CSS align images and text on same line
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
More visual example for the float left/right option as shared below by @VSB:
<h4> <div style="float:left;">Left Text</div> <div style="float:right;">Right Text</div> <div style="clear: left;"/></h4>
How to have images in line with text in css
<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
Display image + text inline inside a div
#imggame { border: 2px solid #EEEEEE; padding: 15px; border-radius: 15px; margin-right: 100px;}img{ width:auto; height:auto; max-width:100%; max-height:100%;}.img-wrap{ float:left; width:20%; margin-right:2%;}.desc{ float:right; width:75%;}.desc p{ margin-top:0;}.clear{ clear:both;}
<h2>Music Maker & Mixer (M3)</h2><div id="imggame"> <div class="img-wrap"> <img src="https://dummyimage.com/200x200/000/fff" width="220px" height="220px" alt="Sample Image" /> </div> <div class="desc"> <p>Make music, mix and remix! With M3 you have a lot of ways to create your music, record songs, use your voice and changing it to instruments... And this all with the better quality! Download now, and share your songs!</p> </div> <div class="clear"></div></div>
Trying to align text under inline images using HTML/CSS
you could wrap each img
with it's p
inside a div
and add display:inline-block
to that div
instead
.inline { text-align: center;}.wrap { display: inline-block; margin: 0 2%;}
<div class="inline"> <div class="wrap"> <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> <p> This is a test</p> </div> <div class="wrap"> <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> <p> This is a test</p> </div> <div class="wrap"> <img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" /> <p> This is a test</p> </div> </div>
Button image inline with text
Yes...use background-position
but that will depend on the look you are going for...which we can't tell without the actual image.
Quick demo...
.upperLeftButton { display: inline-block; background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg); background-repeat: no-repeat; background-position: center left 25px; height: 50px; width: 200px; }
<button class="upperLeftButton">Check</button>
Related Topics
HTML5 Video Safari Downloads Full Before Playing
How to Add HTML Code to Jsf Facesmessage
Advantages and Disadvantages of Using Base64 Encoded Images
HTML5 Autoplay Video in Mobile Device
Cross-Browser Link to File on Local System
Make Floating Divs The Same Height
Word Wrap a Link So It Doesn't Overflow Its Parent Div Width
CSS Selector for No-Children-But-Not-Empty
Why Certain Doctype Declarations Cause 100%-Height Tables and Divs to Stop Working
Is It Possible Put Image in Input Type="Check Box"
CSS Calc Viewport Units Workaround
How to Create Curved & Overlapping Menu Tabs in CSS
Change CSS Font-Family for Separate Options in Select Tag
Transition for Background-Image in Firefox