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>
Related
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
I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links. I use text-center class
my HTML code:
<div class="foot text-center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
and my css file only has for "foot" class:
.foot{
height: 100px;
background-color: #401BE6;
}
what is the problem?
u need to define a display: block; on that <a href=''> element
Inline elements can't be aligned center unless we use the display: block property on them so apply the display: block property to the anchor elements
I hope I interpreted your desired final outcome.
https://jsfiddle.net/vLk8gtjs/30/
Make your buttons inline instead of vertically stacked.
Therefore: create a new class and class each link. I changed the bg to make it easier for me to work with
.img_links {
text-align: center;
display: inline-block;
width: 32%;
}
This aligns links within your div footer box.
I'm not sure why your links aren't working. Try this solution out and leave a comment if your images are displayed, but not clickable.
OPTION ONE
.foot.text-center {
display: block;
text-align: center;
}
OPTION TWO (INLINE CSS)
<div class="foot text-center" align="center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
What I have tried so far?
I tried to put the logo in a div and then tried to align it to left using css
I tried to place the logo with link in a list
None of them worked! The logos right now looks like this
What I am trying to achieve?
I want the logo to be inline separated by space placed from left to right
You can place them inside div with display: flex and disable flex-wrap.
Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.
.logo {
display: flex;
flex-wrap: none;
flex-gap: 1em;
}
/* space between links */
.logo > a {
margin-right: 6px;
}
/* scale your images like this */
img {
height: 40px;
}
<div class="logo">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /></a>
</div>
For markdown application try to place Your code inside <p align="left">YOUR CODE</p> (see example below).
You can also choose left or right.
<p align="left">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
</p>
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/
<body>
<div id="banner">
<img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
<img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>
. . . more stuff down here
In CSS I have float: left for img1. On img2 I have float: right; and clear left;
I've been playing with this for hours with no success. What I'd like to do using CSS is center vertically the text between these two images. I'd also like to place it up against the left image, maybe a few pixels off.
Additionally I want to be able to set the font-size and other attributes (bold, color, etc.) of each of the two lines of text.
Can someone please put me on the right track? Nearly everything I try puts the text under the banner div completely. What am I missing?
Thanks.
If you put the p tag after the images, it will float up between the images and you can position it accordingly. You don't need clear:left on the right image and keep in mind that you can only have one id attribute on an element, not two. The images have two ids in your code, so I removed one.
<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
</div>
#img1{
float:left;
}
#img2{
float:right;
}
You can see this working here: http://jsfiddle.net/duq6R/
First off, you will need to remove the floats on the images and paragraph.
Second, you need to make both images and paragraphs display:inline-block;. Now, you can use vertical-align: middle; to achieve your desired effect.
#banner {
overflow: hidden; /*this is a cheap clearfix*/
text-align: center;
}
#banner img, p {
display: inline-block;
vertical-align: middle;
}
See this JS Fiddle.