【发布时间】：2016-04-01 10:57:26
【问题描述】：
我通常可以通过反复试验（或者我认为）来解决简单的 CSS 问题。但是我整天都在尝试这个，但没有运气。在这一点上，我不确定该怎么做。
我试图在页面顶部居中放置一张图片。我也在使用模板，默认情况下那里有文本。我想我可以用图像替换标题文本就可以了。我错了。
为了更好地了解我在做什么，这里是 github 模板的图片。我指的部分是“示例标题”：https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
标题的代码如下所示：
<!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 部分的样式表如下所示（项目名称部分似乎与 Sample Title 部分相关）：
.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% 和自动、绝对位置做边距，并改变浮动。我试过编辑项目名称样式表信息，以及给图片一个 ID 并以这种方式编辑它。它总是以一些奇怪的位置结束，我无法让它工作。任何帮助将不胜感激！
【问题讨论】：
-
我看不到任何问题，它的工作！问题可能来自其他样式表。
-
@Termininja 你是什么意思它应该工作？就像用图像替换单词会自动居中一样？不幸的是没有:(
-
@Termininja 这里是所有 3 个样式表 github.com/Matt-Stam/league-gg/tree/gh-pages/stylesheets
-
是的，当我“用图像替换文字”时，我确认它居中。你能分享你的非工作版本吗？仅包含图像的 html 行。
-
我让所有图像都向右浮动。无论如何谢谢：D
标签： html css image header center