Need help getting images to display in HTML and SCSS - html

Question

I am really new to HTML and CSS (SCSS in this case), and am having issues getting an Image to display properly on a localhost page I have been experimenting on. I will post my HTML lines, as well as my SCSS lines below. Maybe you guys can tell me what I am doing wrong so I can move ahead.
I have tried linking just the project folder directory path, all the way up to the WHOLE path through my computer to the image. I have quadruple checked the names on the files and the image as well. I believe it is probably just a Syntax error.
<!--HTML LINES:-->
<div id="Center.Logo">
<img src="sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home.component.images\center-logo.png"
alt="Center Circle" style=" width: 250px; height: 250px;"> <!--Desired image -->
</div>
/* SCSS LINES: */
#Center.Logo {
img{
margin: auto;
align-content: center;
}
}
I expect the image to display in the CENTER of the page, instead, it simply gives me the ALT tag next to a little picture icon on the bottom left of the page.

Answer 1

I think your selector should be #Center.Logo in your code it's look like #center.Logo
And if you want looks like it centered try this
And if you can't getting images try working around with your project structure.
<img src="../assets/img/centered-logo.jpg"> etc not whole path or something.

Answer 2

The first thing I noticed is you use a dot inside the name of your id.
This is a problem, since in css the dot is part of a class selector.
The Rule #CSS.Logo {...} applies to an element that has both, an id of 'CSS' and a class of 'Logo'. Something like this:
<div id="CSS" class="Logo">
...
</div>
There is no element like that in your code, so the css rules are not applied.
Second, your original css code is not suitable to center an image within another container.
// This is your original code as you posted it:
img {
margin: auto;
align-content: center;
}
The rule align-content is only applicable in a flex box container. You could however use margins to center the image horizontally like this:
img {
display: block;
margin: 0 auto;
}
What you probably want instead is this:
<div id="center-logo">
<img src="your-image.png" alt="Center Circle">
</div>
body {
margin: 0; // making sure you have the whole page at your disposal
}
#center-logo {
height: 100vh; // using the full height of the viewport
// this is where the actual centering happens:
display: flex; // this is necessary for the following 3 rules (flex box)
flex-flow: row nowrap; // in this case this could also be column nowrap
align-items: center; // vertical center
justify-content: center; // horizontal center
img {
// set a width and height so the image does not stretch and to avoid repositioning
// the image (or other content if there is any) as soon as the image has been loaded
width: 250px;
height: 250px;
}
}
Notice I have used small letters for the id name, because it usually helps avoiding issues caused by misspelling the names afterwards.

Answer 3

I'm assuming it is a regular html and css.
You can compile with node.
npm init
npm install node-sass
Add this to your package.json (in scripts)
"scss": "node-sass --watch scss -o css"
Create two Folders.
CSS and SCSS.
Inside each one, the file style. (With the right termination)
css> style.css eg
and finally
npm run scss
Everything you type in scss, it converts to css.