I am trying to put a profile image next to names, however they won't go next to the text, instead go below the div containing the text. I'm not sure if I'm being blind, but I can't find how to fix it.
To clarify, I'm attempting to put the images that are on the page next to the text (The white next to 'main, the wolf next to 'joe' and kenny next to 'kenny').
EDIT: I found the stupidly easy solution. Flagged for deletion!
I think this can help you:
<div style="display:inline-block;float:left;">
<img alt="" src="" width="50" />
your text here
</div>
Also if you want text will be in center put text in <Div> element like this:
<div style="display:inline-block;float:left;">
<img alt="" src="" width="50"/>
</div>
<div>
your text here
</div>
Related
I have a standard flask project in which there are images file under:
static/images/thump.png
Now I want to display it in this area:
<div class="recommendation">results: </div>
<img src="{{url_for('static', filename='images/thumup.png')}}" />
But the image isn't displayed at all.
Also, I don't want it to be displayed under div tag, but want it to be displayed after the text:
results:
How can I do that?
It would seem that the div with the text and the image together form a 'recommendation'. In that case this structure might be appropriate:
<div class="recommendation">results:<img src="....." /></div>
That will more easily allow placing of the text in relation to the image as well as grouping the whole results info together.
Here's an example - a plain snippet which uses flex to position the text mid-point down the image:
<div class="recommendation" style="display: flex; align-items: center;">results:<img src="https://i.stack.imgur.com/WFkeW.jpg" /></div>
By minus i mean margin/padding:-#px
I have an image which I have put as a div background. Now I need to put three bottoms on the image. SIMPLE SAID : i need three bottoms on the image...in a browser i do it in a matter of seconds but I've found no way how to do it in outlook. My last attempts where to wrap the divs in table and giving parameters to the table itself still not working.
A simple example of what I need to get in an email template.
That's what I receive in output no matter what manipulation I do
My first and cleanest code were simple as the idea itself (just to put three bottoms on an image) but obsolute not working padding not working margin not working in outlook:
<body>
<div class="MainImage" align="right">
<img class="topimage" style="width:600px;height:900px;position:absolute;" src="Files/Meuhedet_eMailTemplate.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:42px;" src="Files/Meuhedet_buy.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:230px;" src="Files/Meuhedet_Tor.png" alt="">
<img class="topimage" style="width:150px;height:25px;position:absolute;margin-top:750px;margin-left:415px;" src="Files/Meuhedet_Inf.png" alt="">
<img class="topimage" style="width:140px;height:14px;position:absolute;margin-top:857px;margin-left:435px;" src="Files/Meuhedet_Website.png" alt="">
<img class="topimage" style="width:60px;height:12px;position:absolute;margin-top:860px;margin-left:355px;" src="Files/Meuhedet_Tel.png" alt="">
</div>
</body>
This is how my code looks now...still no results
Eventually I got to something very complicated and lots of garbage code but nothing worked including wrapping img in grid table tr td and still am not able to use Margin-top: #px.
I am setting up a school project its a gallery of pictures and I'm trying to get images to specifically align but I don't know how. Help.
I've tried basic align right, left and top but it doesn't work.
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980" height="620">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500" height="300" align="top">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500" height="300" align="right">
<!-- Line trying to fix -->
I want the 3rd Image to go under the 2nd image and I want the 3rd image to be the same size as 2nd.
align is no longer supported in HTML5. In this specific case, the images should align correctly if you specify the units of width and height (e.g. px).
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980px" height="620px">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500px" height="300px">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500px" height="300px"> <!-- Line trying to fix -->
Hi I have used display:flex to bring it on 1 line. below is the link.
https://jsfiddle.net/4rL7jnuc/1/888
if you need to check more about flex box then check below link. Thanks
https://www.w3schools.com/cssref/css3_pr_flex.asp
I'm trying to display images from my PC on my website, i've tried using floats but nothing works. Everything I try ends up the same:
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;" align="left";>
<img src="pup.jpg" style="width:50%;height:50%;" align="right";>
</div>
Remove the align left and right and white space between image tags.
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;"><img src="pup.jpg" style="width:50%;height:50%;">
</div>
Read up this blog post about white space. Here is a working plunkr (without your images, obviously): http://embed.plnkr.co/sytM7HeFUVDPT1p3HoXN/preview
<span><img src="1.png" style="padding-left:10px;float:left;">
<img src="2.png" style="margin-left:10px;float:left;"></span>
This puts the two images right next to each other, I want to insert a text that says " into... " in the middle. If I try to add the text, it will start a new line for the image.
You could set both as 'display: inline-block' instead of 'float:left'
"<span><img src="1.png" style="padding-left:10px;display:inline-block;"> into...
<img src="2.png" style="margin-left:10px;display:inline-block;"></span>"
but be aware of vertical-alignment, because you might have to set 'vertical-align: middle' or even 'vertical-align: top' on both images and on the wrapper, in this case the 'span' tag
You can easily do it like this:
<span>
<img src="1.png" style="padding-left:10px;float:left;">
<i style="float:left; padding-left:10px;"> into... </i>
<img src="2.png" style="margin-left:10px;float:left;">
here is working example JSFiddle
try style="float:left" for every of your tags. it will make them stick to the left side. if you want them to have space between, set margin
(if you don't understand what i'm saying, you should google css tutorial. it will help you style your websites