How can I center an image link in html? - html

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>

Related

Placing logo with links inline

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>

CSS-only selection query to hide HTML element If another element has content

The CSS / HTML work I am doing is for an HTML template for eBay. As such, I am unable to use any active content (JavaScript, etc.) which seems to be the easiest way to do this.
The software I am using that fills the template works with tags, in this case {{PARENTIMAGEURL1}} and {{CHILDIMAGEURL1}}. When the tag is not present, the element remains with an empty src attribute.
I need to tweak an image section of the template in such a way that if there is a parent image present, the child image is hidden. There will always be a child image available, so the function does not need to work in reverse.
The HTML for the section is as follows:
<div class="main-image">
<img src="{{PARENTIMAGEURL1}}" alt="Main Image" class="img-responsive">
<img src="{{CHILDIMAGEURL1}}" alt="Main Image" class="img-responsive">
</div>
Is it possible to use the :empty selector to hide the image with the child URL if the parent is present? I'm seeing pretty limited documentation as far as how that might work with a media query.
Any assistance would be much appreciated.
There are two ways you can do this. The first would be to rely on the DOM structure.
DOM structure method
You can use the CSS + selector to select an element that is the very next sibling of another element: in this case, the child image.
So if there's a parent and child image, the child image will be hidden:
.main-image img + img {
display: none;
}
<div class="main-image">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>
Otherwise, the selector will have no effect, and the only image you've got will show up:
.main-image img + img {
display: none;
}
<div class="main-image">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>
Attribute selection
However, if your template is going to not actually remove the parent image but simply make its source empty (i.e., src=""), you can get a bit more creative.
Version one
Here's one approach:
First, hide all parent images
Then, if the parent image has a source that's not empty, show it
If the parent image has a source that's not empty, hide the next image after it (its child image)
It's doing #2 that is the tricky part. You can use an attribute selector to read the image's src, but you need some fragment that will be true all the time, so the style doesn't fail.
In the example below, since all the URLs are from placehold.it, I have included img[src*="placehold"], but your actual solution may look something more like this:
img[src*=".jpg"],
img[src*=".png"],
img[src*=".gif] {
display: block;
}
.main-image img:nth-child(1) {
display: none;
}
.main-image img[src*="placehold"]:nth-child(1) {
display: block;
}
.main-image img[src*="placehold"]:nth-child(1) + img {
display: none;
}
<div class="main-image" style="background: firebrick">
<img src="" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
<img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
Version two
Here's another approach based on a combination of an attribute selector and the :not pseudo selector:
/* hide all parent images with no source */
.main-image img[src=""]:nth-child(1) {
display: none;
}
/* hide all child elements following a parent element that does have a source */
.main-image img:not([src=""]) + img {
display: none;
}
.main-image img[src=""]:nth-child(1) {
display: none;
}
.main-image img:not([src=""])+img {
display: none;
}
<div class="main-image" style="background: firebrick">
<img src="" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
<img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>

Images will not center with CSS

Just turned in a programming assignment for my class and was talking to the teacher when he told me I was not allowed to use to center my images. He said I had to use id and class and then center in the stylesheet/CSS. This makes no sense to me, when I use the inline it works perfectly but I have tried everything I know to center in the stylesheet and nothing works. I have attached 2 examples from my code:
This works perfectly on centering image but the professor says it is not allowed:
<h5>Back View</h5>
<div style="text-align: center"/>
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
Then tried using an id and class and nothing has worked, trying to center both the heading and the image:
HTML:
<h5 class="center">Back View</h5>
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
StyleSheet:
.center {
text.align: center;
}
Your markup is wrong, you dropped the container div:
<h5>Back View</h5>
<div class="center">
<a href="BackViewT-Shirt.html" target="_blank">
<img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
</a>
</div>
Also, you CSS has a typo (ALWAYS VALIDATE!)
.center {
text-align: center;
}
Here, the div aligns its inline contents.
As an aside, you could also do something like:
a{
display:block;
width:200px; /* This should be the width of the image */
margin:0 auto; /* This cryptic statement will center block-level elements */
}
.center {
text-align: center;
}
you used text.align instead of text-align
Your stylesheet also has a typo in it.
.center {
text.align: center;
}
Should be
.center {
text-align:center;
}

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
​
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;

placing image as div background

How can I place only an image in a div as background image, and add url link to it.
Currenty I'm doing it this way:
<div class="image"><img src="books.png" alt="Test" /></div>
I want to do something like following, but its not working (the image does not appear).
<div class="image"><span class="books"></span></div>
Thanks.
Place the background image in the <a> tag if you want it clickable.
your css:
.image a { display: block;
background: url('image.jpg') no-repeat;
height: 50px; /* obviously use the same dimensions as your image */
width: 50px; /* obviously use the same dimensions as your image */
}
<div class="image"> </div>
or better yet, get rid of the div entirely, and just apply the image class directly to a:
<a class="image" href="example.com"> </a>
It's likely it's because the div is empty. Try something like:
<div class="image"><span class="books"> </span></div>
If it's still not showing, set the "image" class to have a background color too, so that you can see how big the div 'thinks' it is.
If you want an image to be in the background you need to set, the style property "z-index:-1", that way, the image will be in the back of the other elements in the same content div
Does it have to be a DIV?
I am writing the style inside you can use it in css file
<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a>
this will work...
you can use it like this if you need div..
<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"></div>