HTML/CSS实现文本与图片居中及左右边距设置的技术问询

阿华AIGC实验室

2026-5-12

Solution: Center Content with 1-Inch Margins

Hey Francis! I see you're working on your bike website for your HTML/CSS/JS class—nice start! Let's get that content centered with the 1-inch side margins you want, and fix a few small issues in your code to make it work properly.

Here's the revised, complete code that meets your requirements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Base page styles */
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background: #8E8E8E;
        }

        /* Container for centered content with 1-inch margins */
        .content-wrapper {
            max-width: calc(100% - 192px); /* 1 inch = ~96px, so 96px * 2 for left/right margins */
            margin: 0 auto;
        }

        /* Navbar base styles */
        #navbar {
            text-align: center;
            background-color: #333;
        }

        #navbar ul {
            display: inline-block;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #navbar li {
            float: left;
        }

        #navbar li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        #navbar li a:hover:not(.active) {
            background-color: #111;
        }

        #navbar .active {
            background-color: #791519;
        }

        /* Sticky navbar behavior */
        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }

        /* Header image styling */
        header img {
            display: block;
            margin: 0 auto;
            max-width: calc(100% - 192px); /* Match content margins */
            height: auto; /* Preserve aspect ratio */
        }

        /* Main content text styles */
        .content {
            font-size: 17px;
            text-align: center;
        }

        /* Bike image styling */
        .bike-image {
            display: block;
            margin: 20px auto;
            max-width: 100%; /* Fit within content margins */
            height: auto;
        }

        /* Footer styles */
        footer {
            background-color: #975026;
            padding: 10px;
            text-align: center;
            color: #1BEF0A;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <a href="home.html">
            <img src="vmoto.gif" alt="vmoto" width="1050" height="163">
        </a>
    </header>

    <nav id="navbar">
        <ul>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="index.html">Mountain Bike</a></li>
            <li><a href="index.html">Road Bike</a></li>
            <li><a href="index.html">BMX</a></li>
            <li><a href="index.html">About</a></li>
        </ul>
    </nav>

    <div class="content-wrapper">
        <img src="bicycle-bike-daylight-100582 (1).jpg" alt="bicycle" class="bike-image">

        <div class="content">
            <h3>Interesting Stuff</h3>
            <p>stuff thats really interesting</p>

            <section>
                <h1>Bike Info (Replace WWF Text Here)</h1>
                <p>Your custom bike-related content will go here once you replace the placeholder text!</p>
            </section>

            <section>
                <h1>More Bike Info</h1>
                <p>Add all your awesome bicycle details here to make this page your own.</p>
            </section>

            <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
            <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
            <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        </div>
    </div>

    <footer>
        <p>Contact Us! 123 Main St. Anywhere, NC 99999* | Phone: (919) 123-4567 Fax: (917) 123-8901 | Twitter and Facebook</p>
    </footer>

    <script>
        window.onscroll = function() { myFunction() };
        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }
    </script>
</body>
</html>

Key Changes I Made:

Organized Code: Separated HTML, CSS, and JavaScript into their proper sections (no more mixed code!) to make it easier to read and edit as you learn.
1-Inch Margins: Added a .content-wrapper class with max-width: calc(100% - 192px) (since 1 inch ≈ 96px, so 96px left + 96px right) and margin: 0 auto to center all your content and keep margins consistent across text and images.
Fixed Sticky Navbar: Added id="navbar" to your <nav> tag (your original JS was looking for this ID but it didn't exist!) and added proper CSS for the .sticky class so the navbar stays fixed at the top when scrolling.
Centered Images: Replaced old align="middle" attributes with modern CSS (display: block; margin: 0 auto) to center images, and set max-width to match content margins so they don't overflow.
Removed Duplicate Code: Got rid of the repeated <ul> CSS styles that were cluttering up your code.
Responsive Images: Added height: auto to images so they preserve their aspect ratio when resizing, making your page look good on mobile devices too.
Placeholder Reminder: Updated the WWF text to clearly mark where you should add your bike-specific content—hard to miss!