Skip navigation
Chloé_L
Currently Being Moderated

Text centered under my images

Apr 22, 2013 3:01 PM

http://lave0134.site44.com/dsn1568/project-final/

 

What can I do to put the text under each image and keep it (images & text) all centered on the page?

 
Replies
  • Currently Being Moderated
    Apr 22, 2013 4:28 PM   in reply to Chloé_L

    Copy & paste this code into a new, blank layout.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link href="css/reset.css" rel="stylesheet">
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    body {
    margin: 0;
    padding: 0;
    text-align: center;
    }
    
    header {
    background: #333;
    color: #FFF;
    }
    
    header h1, header p {
    margin: 0;
    padding: 0
    }
    
    nav {
    margin: 0;
    padding: 0;
    min-height: 50px;
    background: #A7DBDD;
    }
    
    nav p {
    margin: 0;
    padding: 0;
    text-align: center
    }
    
    section {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    background: #fff
    }
    
    img { width: 500px; }
    
    footer { background: #A7DBDD; }
    </style>
    </head>
    
    <body>
    <header> 
    <p><img src="images/logo-CL.png" width="112" height="145" alt="logo"></p>
    <h1>Site Name</h1>
    <nav> 
    <p><a href="index.html">portfolio </a> | <a href="about-me.html">about</a></p> 
    </nav>
    </header>
    
    <section> 
    <img src="images/orange-mug.jpg" alt="#"> 
    <p>Prisma pencils and graphite drawing.</p> 
    <img src="images/chevelle.jpg" alt="#"> 
    <p>Digital painting of a Chevrolet Chevelle SS 1970 using a graphic tablet and photoshop CS6.</p> 
    <img src="images/alexis.jpg" alt="#"> 
    <p>Caption</p> 
    <img src="images/red-car.jpg" alt="#"> 
    <p>Caption</p> 
    <img src="images/lobato-illustration.jpg" alt="#"> 
    <p>Caption</p> 
    <img src="images/stamp.jpg" alt="#"> 
    <p>Caption</p> 
    <img src="images/iphone.jpg" alt="#"> 
    <p>Caption</p> 
    <img src="images/moose.jpg" alt="#"> 
    </section>
    
    <footer> 
    <small>&copy; 2013 Chloé Lavergne. All Right Reserved </small> 
    </footer>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points