如何让设置430px宽度的网页文本保持居中显示？

Hey there! Let's sort out this problem where your text is left-aligned after setting a 430px width. The main issues with your current code are:

• The deprecated <center> tag doesn't play nicely with block elements that have fixed widths
• Your CSS has invalid syntax (center; isn't a valid property)
• There's an unclosed <a> tag for the "about" link
• Wrapping a <div> inside a <p> isn't valid HTML (block-level elements can't go inside inline/paragraph elements)

Here's the corrected code that achieves both a 430px width and centered alignment, plus fixes those other small issues:

<!DOCTYPE html>
<html>
<head>
    <title>contact</title>
    <style>
        /* Center the navigation container */
        .nav-bar--column {
            margin: 0 auto;
            width: fit-content;
        }
        /* Style the content container: 430px width + centered */
        .content-container {
            width: 430px;
            margin: 0 auto;
            /* Optional: add some spacing if needed */
            margin-top: 20px;
        }
        /* Your word-wrap rule if needed (though default is usually fine) */
        .content-container {
            word-wrap: normal;
        }
    </style>
</head>
<body>
    <div class="panel">
        <!-- Center image with CSS instead of deprecated <center> tag -->
        <img src="img/about_blackonorange.png" height="215" width="215" style="display: block; margin: 0 auto;">
        
        <div class="twelve columns nav-bar--column">
            <nav class="nav-collapse">
                <a href="home.html">home</a>
                <a href="news_v2.html">news</a>
                <a href="visual_v2.html">visual</a>
                <a href="audio_v2.html">audio</a>
                <a href="contact_v2.html">contact</a>
                <a href="about.html">about</a> <!-- Fixed unclosed tag -->
            </nav>
        </div>

        <!-- CONTENT GOES HERE -->
        <div class="content-container">
            blah blah blah blah blah.
            <br><br>
            blah blah blah blah blah.
        </div>
    </div>
</body>
</html>

Key Changes Explained: #

1. Moved CSS to the <head> section: This is the proper place for styles, not inside the <body>
2. Replaced <center> with CSS margin: 0 auto: This is the modern, standard way to center block-level elements. For the image, we set display: block so margin: 0 auto works (images are inline by default)
3. Created a dedicated content-container class: This targets only your main text content, so you don't accidentally apply width styles to all divs (which was happening in your original code)
4. Fixed the unclosed <a> tag: Ensures valid HTML structure
5. Removed invalid <p> wrapping <div>: Cleaned up the HTML to follow standards

If you want to keep using your original class name "a" instead of "content-container", just swap the class names in the CSS and HTML—it'll work the same way.

内容的提问来源于stack exchange，提问作者perez