Images will not center with CSS - html

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;
}

Related

How can I center an image link in 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>

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>

HTML5 - img alignment centre not working

I am trying to align my profile picture in the middle of my webpage yet cannot seem to get it working. I have attempted both align="middle" & float methods yet it still refuses to leave the left hand side.
The code I have attempted to use (HTML5) is
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
Any help would be appreciated, thank you.
align attribute for the image is aligning it relativelly to the text or other images on webpage (for more info: https://www.w3schools.com/tags/att_img_align.asp).
And notice (info from w3schools):
"The align attribute of is not supported in HTML5. Use CSS instead."
So align attribute will not do the trick in your case, you can center image using:
img {
display: block;
margin: 0 auto;
}
instead. Here is an example:
img {
display: block;
margin: 0 auto;
}
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
You Have misused the inline style tag, proper use would be as follows:
<div class="image-cropper" style="text-align: center">
<img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" />
</div>
I could help you more if I had the URL to the website.
Compatibility Notes
The align attribute of img tag is not supported in HTML5. Use CSS instead.
For the image to align middle, top, or bottom use the CSS property.

CSS width with IE7: inline-block not working even after hacks

I am trying to display a list of images with text on my webpage. But in IE7, it is displaying each image below the other and not next to other. Looks like it is because of lack of support of inline-block. I read some articles and added some things to my CSS, but still it is not working.
He is the HTML:
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84" height="150" src="some-image" alt="accept">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="112" height="150" src="some-image"">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="215" height="150" src="some-image">
</div>
<divclass="unaccept">
<h4>Unacceptable</h4>
<img width="165" height="150" alt="unaccept" src="some-image"">
</div>
</div>
My CSS looks like this::
.unaccept, .accept{
display: inline-block;
text-align: center;
margin: 0 0.75em;
zoom:1;//Added after reading other posts
*display:inline; //Added after reading other posts
}
I added the last two lines after reading a lot of articles/ pages about this problem. But still it is not working.
I tried adding:
*width:173px to the class accept, but then it is breaking when the image width is more, if I increase the width width of all accept classes(even where the image width is less is getting increased, so the page does not look good again).
Can someone please help me out? All I want is to display these images next to each other with their default widths.
IE7 only supports inline-block on elements that are inline by default.
Use float: left; instead, that works with following the standards, without any IE hacks:
.image_example { overflow: hidden; }
.unaccept, .accept {
float: left;
text-align: center;
margin: 0 0.75em;
}
Demo: http://jsfiddle.net/Guffa/xCREN/

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;