Search code examples
htmlcssimageheadercenter

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

I would normally be able to solve simple CSS problems with just some trial and error (or so I thought). But I've been trying this all day with no luck. At this point I am not sure what to do.

I am trying to center a picture at the top of my page. I am also using a template, and by default there is text there. I figured I could just replace the title text with an image and it would be fine. I was wrong.

To give a better idea of what I am doing, here is a picture of the github template. The part I am referring to is "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3

The code for the header looks like this:

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

The stylesheet for the Header portion looks like this (the project-name portions seemed to be related to the Sample Title part though):

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

I have tried everything that I know of to try to center the picture (a small logo) where the Sample Title text was with no luck. I've tried doing margins with 50% and auto, absolute positions, and changing the float. I've tried editing the proeject-name stylesheet info, as well as giving the picture an ID and editing it that way. It always ends up in some odd position and I cannot get it to work. Any help would be greatly appriecated!

Solution

  • you should add your image to your source like this:

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

    no extra css are needed. it will center your image at the top of page.

    PS

    The src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.

    This is not currect:

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

    Currect Version:

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