image with link and keep it centered - html

Hi I am trying to add an image with a link and keep it centered and my code isn't working can you help?
<img src="flower.jpg" width="82" height="86" class="centerImage" " title="White flower" alt="Flower">

Just add some style to change <img /> from inline element to block element and use margin to center it.
For example
img {
display: block;
margin: 0 auto;
}
<a>
<img width="80" src="https://images.unsplash.com/photo-1659574087501-92ef4aa7b2d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="demo"/>
</a>
Hope this might help you

Related

In Html5 how do I have Image link with text beneath it

In Html how do I have Image link with text beneath it, Ive read about Figure and Figure Caption but that seems to be only for a standalone image not one within an a link.
This is what I currently have, it shows the 470 x 470 text to the bottom left of the image instead of beneath it.
<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">470 x 470
<img
src="../images/txpvc3LLOvRWy5XLiJE9Zw==_thumbnail.jpg"
hspace="4"
height="100"
width="100"
align="top">
</a>
You can use <a> tags around the figure.
If you want to centre the text in the caption you'd have to set the figure to inline-block and the figcaption to have text-align: center
figure {
display: inline-block;
}
figcaption {
text-align: center;
}
<a href="#">
<figure>
<img src="https://via.placeholder.com/350x150" alt="demo image" />
<figcaption>This is an example of a link, it goes nowhere...</figcaption>
</figure>
</a>
Not sure what exactly you want.
My assumption is you want image and text both should be clickable and align the text to bottom.
Make your img as blocked element. So that the text will automatically comes below the image.
.testimg {display:block}
<a href="../images/txpvc3LLOvRWy5XLiJE9Zw==.jpg">
<img class="testimg"
src="http://miumosa.com/assets/products/sample-_20170209104115.png"
hspace="4"
height="100"
width="100"
align="top">470 x 470</a>
Try this.
You can change the width of img if required.
.imgtext {
text-align: center
}
.imgtext img {
display: inline-block;
margin: 0 auto;
width: 150px;
;
}
<div class="imgtext">
<img src="https://s14.postimg.org/u18a0yc1t/contact-1.jpg" alt="" />
<p>**Image text** </p>
</div>

Div Spacing between Images

Dear Members of this amazing Forum
I recently started using Html again and for the love of God i can't figure out where the problem is.
I created 3 Div's, each with 1 image, 1 group of images, and 1 image again. (same problem if all are in the same div, with a rather basic Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
And the Html to use it.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
What results in the image below, sadly i don't get where the little space is from. Or why it's not on top too. Somehow i'm really confused where this issue is from and i'd realy appreciate the help.
[2]: http://i.imgur.com/SIkB7Hs.png <-- this one schould be a bit more clear sorry about that
edit: if found a rather face-> wall way to fix it with margin-top. And just making a div class for everyline. What's probably not the best way to go.
Ok, a few things here.
For one, with questions like this, it helps people answering a LOT if you post your code in a JSFiddle, like this here (though the images don't show there because they're relative URLs).
Also, it seems if you float the images to the left you can get rid of the spacing:
.HeaderNav img {
float: left;
}
Just to note, I have no idea why the spacing existed in the first place. Another tip: you should use 'Inspect Element' in Chrome or Firebug in Firefox to take a look at elements and see padding, margins, etc. Usually that makes it obvious where whitespace is coming from, though in this case I found nothing. Floating to the left was just an idea that seemed to work.
Probably because your <img> are still being declared as inline-level elements. Use:
.HeaderNav img {
display: block;
}
Also, you should check if a margin or padding have been assigned to the image element. If you do, reset them.
Also, make sure your padding and margin are 0 for the html and body...
so, try this:
body, html {
margin: 0;
padding: 0;
}
HTML cannot be used on it's own; it has to have CSS working with it continuously.
A bit confusing question, I don't understand it all. But check this jsFiddle. Is this what you mean?
Also remove the HeaderNav class from the first image.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
The img element default display type like inline-block, because of the font-size, so the img element maybe have 3px space.
To solve this problem, you can use the code below:
.HeaderNav img {
display: block;
}
or
.HeaderNav img {
float: left;
}
They all will change the img elements display type, I recommend the first one.

Centralize vertically a text and an image inside a <a> element

My simple HTML:
<a>
<span>My Text</span>
<img src="" width="50" height="50" />
</a>
My CSS:
a {
padding: 6px;
}
Fiddler: http://jsfiddle.net/sa3LT/
Hi everybody!!
I'm having a trouble with this question. Is simple, I think, but for me I don't find a resolution for this problem.
Tks for all.
It sounds like you want the text in the a tag to be vertically centered next to the image. Adding this bit of CSS will solve the issue (and as pointed out from Smeegs, this CSS will be for all img tags inside an a block:
a img {
vertical-align: middle;
}
JSFiddle: http://jsfiddle.net/sa3LT/1/

How to make the <img> tags line up horizontally in the div?

I need to make the images show up side by side horizontally in the div. How can I do that?
HTML:
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
You could also use css properties display:inline-block or float : left to achieve this.
HTML Code
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}
On the general assumption of your code being something like this
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
.partners img { display: inline; }
Rather than using inline, which robs you of a lot of the control that comes with block elements, or changing their vertical align, I'd float them:
<html>
<head>
<style>
div.img_holder img
{
float: left;
}
</style>
</head>
<body>
<div class = "img_holder">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inline would keep you from setting their height. Inline also affects how margins and padding work. vertical-align is inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
now you can used to
Your default link is http://tinkerbin.com/ob9HFOA4
Css
img{
display: inline-block;
vertical-align: top;
}
live demo http://tinkerbin.com/a5BxIZrs
Firts of all, in order not to mess up your other images you're probably going to add, do this:
.Wrapper img{ float: left; }
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
.Wrapper img{ float: left; }
EDIT: Add this rule to .Wrapper
.Wrapper{ width: 100%; }

Where this gap comes from and how to get rid off it?

Simple code:
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
<img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Two images have margin and padding of 0 but there's still a gap between them.
How to avoid this behavior?
And YES that's not a mistake, the whole thing has to be in A tag.
Example:
http://jsfiddle.net/fqrfU/
I believe it's the line-height that's causing the problem. Check it out.
On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.
The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.
Just making the images display: block; resolves this in your scenario.
This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/
add in both display:block;
Demo: http://jsfiddle.net/fqrfU/22/
You can float and clear them:
img {
clear: both;
float: left;
}
http://jsfiddle.net/lukemartin/fqrfU/11/
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Are you having a problem in IE?
Try putting both images tags on the same line in the HTML, w/o any spaces in between...
Simply your css by doing,
.image, .shadow {
margin: 0;
padding: 0;
display:block;
}
http://jsfiddle.net/fqrfU/43/
What Bogdan said, or:
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img
src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.
-- pete
This worked for me just now:
img
{
display: block;
}