试图通过 CSS 将图片置于页面顶部的中央

Question

我通常可以通过反复试验（或者我认为如此）来解决简单的 CSS 问题。但是我整天都在尝试这个，但没有运气。在这一点上，我不知道该怎么做。

我正在尝试将图片置于页面顶部的中央。我也在使用模板，默认情况下那里有文本。我想我可以用图像替换标题文本，这样就可以了。我错了。

为了更好地了解我在做什么，这里有一张 github 模板的图片。我指的部分是 "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3

header 的代码如下所示：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Sample Title by Somebody</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Sample Title</h1>
      <h2 class="project-tagline"></h2>
      <a href="" class="btn">View on GitHub</a>
      <a href="" class="btn">Download .zip</a>
      <a href="" class="btn">Download .tar.gz</a>
    </section>

Header 部分的样式表如下所示（project-name 部分似乎与示例标题部分相关）：

.page-header {
  color: #fff;
  text-align: center;
  background-color: #159957;
  background-image: linear-gradient(120deg, #155799, #159957); }

@media screen and (min-width: 64em) {
  .page-header {
    padding: 5rem 6rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .page-header {
    padding: 3rem 4rem; } }

@media screen and (max-width: 42em) {
  .page-header {
    padding: 2rem 1rem; } }

.project-name {
  margin-top: 0;
  margin-bottom: 0.1rem; }

@media screen and (min-width: 64em) {
  .project-name {
    font-size: 3.25rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .project-name {
    font-size: 2.25rem; } }

@media screen and (max-width: 42em) {
  .project-name {
    font-size: 1.75rem; } }

.project-tagline {
  margin-bottom: 2rem;
  font-weight: normal;
  opacity: 0.7; }

@media screen and (min-width: 64em) {
  .project-tagline {
    font-size: 1.25rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .project-tagline {
    font-size: 1.15rem; } }

我已经尝试了我所知道的所有方法来尝试将示例标题文本居中的图片（一个小徽标）放在中间，但没有成功。我试过使用 50% 和自动、绝对位置和更改浮点数来做边距。我试过编辑 proeject-name 样式表信息，并为图片提供 ID 并以这种方式进行编辑。它总是在一些奇怪的位置结束，我无法让它工作。任何帮助将不胜感激！

Answer 1

您应该像这样将图像添加到源中：

<h1 class="project-name">
    <img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>

不需要额外的 css。它会将您的图像置于页面顶部的中央。

PS

src 属性应包含有效的 URL。由于 URL 中不允许出现 space 个字符，因此您必须对它们进行编码。

这不是当前的：

<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>

当前版本：

<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>

试图通过 CSS 将图片置于页面顶部的中央

Trying to center a picture on top of a a page via CSS

html

css

image

header

center