html - Div 不会在 wordpress 主题中居中

Question

所以我有一个带有通常边距的 div:0 auto 和文本对齐:中心等，当它位于中心时，文本/图像的第一个字母(#header img，#header s)位于中心，而不是实际图像的中心。我还认为我的其余内容略微偏离了几个像素，但不太清楚。

相关CSS；

#wrapper {
    max-width: 900px;
    min-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

#container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0;
    text-align: center;
}

#main {
    width: 100%;
    margin: 0 auto;
    float: left;
}

/* nav style */
#header, #footer, .pagination {
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    left: 0;
    right: 0;
    text-align: center;
    float: left;
}

#menu-nav {
    margin: 0 auto;
    width: 100%;
    border-bottom: 1px solid;
    float: left;
    position: relative;
}

#menu-nav li, #footer li, .pagination li {
    padding: 20px;
    list-style: none; 
    display: inline-block;
    text-align: center;
}

#menu-nav a {
    display: block;
}

#menu-nav a, #menu-nav a:visited, #footer a, #footer a:visited, .pagination a, pagination a:visited, a, a:visited {
    text-decoration: none;
}

/* end nav style */

/* element styling */

h1 a {
    text-decoration: none;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 15px;
}

#header {
    text-align: center;
    margin-top: 8px;
    width: 100%;
}

#header a {
    /*float: left; - uncomment to align logo with intro text */
    margin: 0 auto;
}

#header img {
    max-width: 150px;
    margin: auto;
}

#intro {    
    width: 35%;
    margin: 0 auto;
    text-align: left;
    padding-top: 30px;
    padding-bottom: 50px;
}

相关html:

<div id = "wrapper">
    <div id = "container">
        <div id = "header">
            <?php if ( get_theme_mod( 'logo-upload' ) ) : ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <img src="<?php echo get_theme_mod( 'logo-upload' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                </a>
            <?php else : ?>
                <h1><a href = "index.php"><?php echo get_theme_mod('title_textbox', 'Suburbia'); ?></a></h1>
            <?php endif; ?>

            <?php wp_nav_menu( array( 'Nav' => 'Nav' ) ); ?>               
        </div>
    </div>
</div>

Answer 1

您的页眉和页脚没有居中对齐，因为所有边上都有 20px 的 padding。使 padding left 和 right 为 0，div 应该正确对齐。

#header, #footer, .pagination {
    padding: 20px; // Change this to below
    padding: 20px 0;
}