Search code examples
wordpresstextalignmentfooter

Why isn't my text being centered? (Via WordPress site)


I've been working on my first WordPress site (yay!) and I'm using the new 2012 theme. There isn't an option to put widgets in the footer, so I added a sidebar, and my text randomly got pushed to the side. Site: http://www.rachelsilberman.com/dan-krokos/

If you look in Chrome it's centered, but make the page smaller and it scales to the right side. I put the text in a div called footer-name. I feel like there's a float:left that's happening somewhere, or something that's overwriting the footer style.

The CSS I'm using

footer[role="contentinfo"] {
border-top: 1px solid #ededed;
clear: both;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
max-width: 960px;
max-width: 68.571428571rem;
margin-top: 24px;
margin-top: 1.714285714rem;
margin-left: auto;
margin-right: auto;
padding: 24px 0;
padding: 1.714285714rem 0;
background-color: #E3E3E3;
}
footer[role="contentinfo"] a {
color: #686868;
}
footer[role="contentinfo"] a:hover {
color: #55abe8;
}

#footer-name{
 display: block;
 margin-left: auto;
 margin-right: auto;
 background-color: aqua;
}

#footer-sidebar {
 display:block;
 height: 30px;
}

#footer-sidebar1 {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

The footer I wrapped the div in (via footer.php)

<div id="footer-name">
        <a href="<?php echo esc_url( __( 'http://rachelsilberman.com/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Website created by %s', 'twentytwelve' ), 'Rachel Silberman' ); ?></a>
        </div>

and the code that I used to make the extra sidebar located in the functions.php.

register_sidebar( array(
    'name' => __( 'Footer', 'twentytwelve' ),
    'id' => 'sidebar-2',
    'description' => __( 'Appears on footer', 'twentytwelve' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
) );

Solution

  • if u want the footer text to be centered u can try this

    div#footer-name {
        background-color: aqua;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center; // added this line
    }