Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
需要帮助获取以HTML和SCSS显示的图像吗_Html_Css_Sass - Fatal编程技术网

需要帮助获取以HTML和SCSS显示的图像吗

需要帮助获取以HTML和SCSS显示的图像吗,html,css,sass,Html,Css,Sass,我对HTML和CSS(在本例中是SCSS)非常陌生,而且我一直在尝试在本地主机页面上正确显示图像时遇到了一些问题。我将在下面发布我的HTML行和我的SCSS行。也许你们可以告诉我我做错了什么,这样我可以继续前进 我尝试只链接项目文件夹目录路径,一直链接到通过我的计算机到图像的整个路径。我已经四次检查了文件和图像上的名称。我相信这可能只是一个语法错误 <!--HTML LINES:--> <div id="Center.Logo"> <img src="sberub

我对HTML和CSS(在本例中是SCSS)非常陌生,而且我一直在尝试在本地主机页面上正确显示图像时遇到了一些问题。我将在下面发布我的HTML行和我的SCSS行。也许你们可以告诉我我做错了什么,这样我可以继续前进

我尝试只链接项目文件夹目录路径,一直链接到通过我的计算机到图像的整个路径。我已经四次检查了文件和图像上的名称。我相信这可能只是一个语法错误

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

/*SCSS线路:*/
#中心。标志{
img{
保证金:自动;
对齐内容:居中对齐;
}
}

我希望图像显示在页面的中心,相反,它只是在页面左下角的一个小图片图标旁边给我一个ALT标记。

我认为您的选择器应该是
#CENTER.Logo
在您的代码中,它看起来像
#CENTER.Logo

如果你想让它看起来像个中心,试试看

如果无法获得图像,请尝试使用项目结构


等等,不是整个路径或其他什么。

我注意到的第一件事是你在身份证的名字里用了一个点。 这是一个问题,因为在css中点是类选择器的一部分

规则
#CSS.Logo{…}
适用于同时具有“CSS”id和“Logo”类的元素。大概是这样的:

<div id="CSS" class="Logo">
    ...
</div>
img {
    display: block;
    margin: 0 auto;
}

规则对齐内容仅适用于flex box容器。但是,您可以使用边距将图像水平居中,如下所示:

<div id="CSS" class="Logo">
    ...
</div>
img {
    display: block;
    margin: 0 auto;
}

您可能想要的是:

<div id="center-logo">
  <img src="your-image.png" alt="Center Circle">
</div>

请注意,我使用了小写字母作为id名称,因为它通常有助于避免以后拼写错误引起的问题。

我假设它是一个普通的html和css

可以使用节点进行编译

npm init
npm install node-sass
将其添加到package.json(脚本中)

“scss”:“节点sass——观察scss-o css”

创建两个文件夹

CSS和SCSS。 在每个文件中,都包含文件样式。(有权终止) css>style.css例如

最后

npm run scss

您在scss中键入的所有内容都将转换为css。

p.S.scss中未大写的#center标记已调整为大写,因此无效。您好,NotJayson,欢迎使用stackoverflow。你能发布你的目录结构吗?例如,SCS最终将编译到哪里以及映像在哪里?@BagusTesa我可以将通用目录结构发布到SCS和映像文件,但是,我不确定SCS将编译到哪里。以下是SCSS的目录路径:C:\Users\Jason\Downloads\Repo-1\MEAN expiremental\sberube-portfolio-site-f29e4e843dc2\src\app\home\home\home\home.component.SCSS////和图像路径:C:\Users\Jason\Downloads\Repo-1\MEAN expiremental\sberube-portfolio-site-site-f29e4e843dc2\src\app\home\home\home\home.component.images\center-logo.pngIIRC,
img
标记只允许使用斜杠(
/
)来指示新路径,而不允许使用反斜杠(``)。@Edric我将(\)改为(/),但它什么也没做。我在自己的帖子上发表了评论,澄清了两个标记实际上都有大写字母C,我只是错过了输入,不幸的是,即便如此,它也有同样的问题。你能看一下项目结构吗?额外的帮助没有起作用,即使你修改了HTML和SCS的语法。我应该补充一点,我正在使用VisualStudio代码,运行一个Angular CLI插件来服务于我的本地主机页面。如果这有什么意义的话。你在angular的项目?我回复Bagus Tesa,说要去SCS和图像。