Div 不会以 wordpress 主题为中心答案

【问题标题】：Div won't center in wordpress themeDiv 不会以 wordpress 主题为中心
【发布时间】：2014-03-28 10:45:16
【问题描述】：

所以我有一个具有通常边距的 div：0 auto 和 text align: center 等，虽然它在中心，但文本/图像的第一个字母（#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>

【问题讨论】：

请在 JSFiddle 中提供输出 HTML
jsfiddle.net/addrum/nh3KJ - 这是 html，该网站的链接是：suburbia.comoj.com/wordpress
我可以在您的页面中看到两个不正确的<div id="wrapper">
每个元素只能有一个ID，每个页面只能有一个具有该ID的元素

标签： html css wordpress

【解决方案1】：

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

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

【讨论】：