Chrome New Tab

by MythOfEchelon

HTML

<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" rel="stylesheet">
            div {
                float: left;
            }
            
            #frame {
                float: none; /*Used to ignore the global div "float: left" rule above*/
                width: 650px; /*Increase this to make all of the images in-line*/
                margin: auto; /*You said that you wanted it to be centered*/
            }

            .imageWrapper {
                margin: 10px 5px 0px 5px; /*top, right, bottom, left*/
                text-align: center; /*This centered the text AND the image. Don't ask why*/
            }
            
            .imageWrapper img { /*Only applied to img tags inside elements with the "imageWrapper" class*/
                width: 200px;
                height: 160px;
                cursor: pointer;
                margin: 0px 0px 5px 0px; /*Offset the text below the image*/
                border: 1px solid #ffffff;
            }
            
            .imageWrapper img:hover {
                /*All previous attributes are retained when selectors (:hover) are used. No need to retype them*/
                border: 1px solid #0000ff;
            }
            
            #thumbnails span {
                display: block;
                width: 100%; /*Width must be 100% for "text-align: center" to work*/
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div id="frame">
            <div id="thumbnails">
                <div class="imageWrapper">
                    <img src="Thumbnails/Baseball.JPG" /> 
                    <span>Baseball</span>
                </div>
                <div class="imageWrapper">
                    <img src="Thumbnails/Volleyball.JPG" />
                    <span>Volleyball</span>
                    </div>
                <div class="imageWrapper">
            ...