Question

我真的是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;
            }
        }

我希望图像显示在页面的CENTER中，相反，它只是给我ALT标签，位于页面左下方的小图片图标旁边。

Answer 1

我认为您的选择器在您的代码中应为removeNode，看起来像#Center.Logo

如果您希望看起来像居中，请尝试this

如果无法获取图像，请尝试处理项目结构。

#center.Logo等不是整个路径或其他内容。

Answer 2

我注意到的第一件事是您在ID名称中使用了一个点。这是一个问题，因为在CSS中，点是类选择器的一部分。

规则#CSS.Logo {...}适用于同时具有ID“ CSS”和类“ Logo”的元素。像这样：

<div id="CSS" class="Logo">
    ...
</div>

您的代码中没有类似的元素，因此不应用css规则。

第二，您原始的CSS代码不适合在另一个容器中居中放置图像。

// This is your original code as you posted it:
img {
    margin: auto;
    align-content: center;
}

规则align-content仅适用于弹性盒容器。但是，您可以像这样使用边距将图像水平居中放置：

img {
    display: block;
    margin: 0 auto;
}

您可能想要的是：

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

注意，我对ID名称使用小写字母，因为它通常有助于避免以后因拼写错误而引起的问题。

Answer 3

我假设它是常规的html和CSS。

您可以使用node进行编译。

npm init
npm install node-sass

将此添加到您的package.json（以脚本形式）

"scss": "node-sass --watch scss -o css"

创建两个文件夹。

CSS和SCSS。每一个内部都有文件样式。（带有正确的端子） css> style.css例如

最后

npm run scss

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

需要帮助以HTML和SCSS显示图像

3 个答案: